Question

以下代码似乎在IE中不起作用（使用9） - 测试1触发但测试2没有。是否有不同的方式为IE做这个？

<script>
$(document).ready(function () {
    overlay = $("#overlay");
    img = $("#myimg");
    alert('test 1');
    img.load(function () {
        alert('test 2');
        var myPercent = 50;
        var myHeight = $("#myimg").height() / 100 * myPercent;  
        overlay.height(myHeight);
        overlay.width($("#myimg").width());
        $(".percent").css('margin-top', $("#myimg").height()/2 - $(".percent").height()/2);
        $(".percent").text(myPercent + "%");
    });
});
</script>

编辑：使用$（window）.load（function（）{而不是文档就绪并删除函数

来修复它

Answer 1

来自.load()

的jQuery API

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能一致地工作，也不能可靠地跨浏览器

如果图像src设置为，则在WebKit中无法正确触发   和以前一样的src

它没有正确地冒泡DOM树可以停止射击   已经存在于浏览器缓存中的图像

利用$(window).load()：

$(window).load(function() {
    alert('test 2');
    var myPercent = 50;
    var myHeight = $("#myimg").height() / 100 * myPercent;  
    overlay.height(myHeight);
    overlay.width($("#myimg").width());
    $(".percent").css('margin-top', $("#myimg").height()/2 - $(".percent").height()/2);
    $(".percent").text(myPercent + "%");
});

Answer 2

从技术上讲，你应该能够在img标签上添加onload参数，该标签调用js函数执行相同的操作。我没有对此进行测试，但值得一试。

...

<script>
  function resizeImg ($img) {
    // code
  }
</script>

...

<img onload="resizeImg($(this));" src="foo.png" />

然后你可以使用jQuery。

...

<script>
  $("#fooImg").load(function () {
    // code
  });
</script>

...

<img id="fooImg" src="foo.png" />

Answer 3

如果您不介意使用插件，Paul Irish制作了一个简单的插件来处理图像加载，因为.load()无法处理图像。插件已移动并转换为可在GitHub上找到的项目。

$.fn.imagesLoaded = function (callback) {
    var elems = this.filter('img'),
        len = elems.length,

    // data uri bypasses webkit log warning (thx doug jones (cjboco))
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    elems.bind('load', function () {
        // check image src to prevent firing twice (thx doug jones (cjboco))
        if (--len <= 0 && this.src !== blank) {
            callback.call(elems, this);
        }
    }).each(function () {

        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined) {
            var src = this.src;

            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            this.src = blank;
            this.src = src;
        }
    });
};

你可以在这个小提琴中看到它。

http://jsfiddle.net/denniswaltermartinez/c4DMH/

Answer 4

IE不支持img.load（）作为事件。实际上没有必要，$（document）.ready（）函数已经确保加载了img和其他元素。只需删除它。

JS在Chrome中不会触发IE

4 个答案: