Question

我正在编写一个相当复杂的AJAX驱动菜单，其中包含多个级别的动画，允许用户在某些时候导航复杂的树结构我必须添加一个自动居中（vert和horz）与每个相关联的图像的函数菜单树上的项目。为了测量图像并相应地定位它们，我必须先将它们写入隐藏的div（“#tempHolder”）一旦它们.load（）然后我可以得到它们的尺寸，计算我的偏移然后将图像写入到DOM中。适当的地方。

这一切都适用于符合标准的浏览器，但IE7-8似乎只在他们感觉到时才处理.load（）命令。（主页菜单加载好，首先访问子页面打破菜单，刷新页面再次修复它...等等）。我重新构建了我的函数，以便尽早制作.load（）声明，因为我在这里阅读的建议（http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img -elements /）但这似乎没有奏效。我还添加了e.preventDefault，因为stackOverflow线程说这可能会阻止IE缓存我的加载语句。

以下是导致问题的功能：

 if (this.imagePath != "") {

            runImage = function (imagePath, $itemEle) {

                var $itemEleA = $itemEle.find('a');
                var image = new Image();

                //$thisImage = $(image);

                $(image).load(function (e) {

                    //alert('image loaded')
                    $(image).evenIfHidden(function (element) {
                        //alert('even if hidden');
                        ////////////console.log($thisImage);
                        var elementWidth = element.width();
                        var elementHeight = element.height();

                        this.imageHeight = elementHeight;
                        this.imageWidth = elementWidth;


                        //alert('widthoffset = ' + widthOffset + 'imagewidth = ' + imageWidth + 'this.imageWidth = ' + this.imageWidth + 'elementWidth = ' + elementWidth);

                        var imagePaddingWidth = 230 - imageWidth;
                        var widthOffset = imagePaddingWidth / 2;
                        widthOffset = widthOffset + "px";

                        element.css("left", widthOffset);

                        var imagePaddingHeight = 112 - imageHeight;

                        if (imagePaddingHeight < 0) {
                            var heightOffset = imagePaddingHeight;
                            heightOffset = heightOffset + "px";

                            element.css("top", heightOffset);

                        }
                        if (imagePaddingHeight > 0) {
                            var heightOffset = imagePaddingHeight - 18;
                            heightOffset = heightOffset + "px";

                            element.css("top", heightOffset);
                        }

                    });

                     $(this).appendTo($itemEleA); 

                    e.preventDefault();
                    return image;
                });

                image.src = imagePath;

                //var tempvar = $itemEle.find('a');
                $(image).appendTo("#tempHolder");
            }

            this.image = runImage(this.imagePath, $itemEle);
        }

由于这是针对一个大客户并且该网站尚未上线我无法显示该网站，但我会尝试稍后放一些屏幕截图。

非常感谢任何帮助。

Answer 1

这是一个非常常见的问题，如果图像已经在缓存中，某些浏览器（我应该直接说 - IE？）无法触发加载事件。因此，有一种解决方法的技术。

// After this line of your code
image.src = imagePath;

// put this
if (image.complete || image.naturalWidth > 0) { // if image already loaded
    $(image).load(); // trigger event manually
}

IE7-8忽略了有选择地忽略jquery图像.load（）和/或.load函数的内容

1 个答案: