JS没有'IE中的t fire在Chrome中没有

JS doesn't fire in IE does in Chrome

本文关键字：fire Chrome 中的 没有 IE JS      更新时间：2023-09-26

以下代码似乎在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>

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

来修复它

从.load（）的jQuery API

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

开发人员试图使用.load（）解决的一个常见挑战快捷方式是当图像（或图像）已经完全加载。有几个已知的注意事项这一点值得注意。这些是：

它在跨浏览器中工作不稳定也不可靠

如果将image src设置为与之前相同的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 + "%");
});

从技术上讲，您应该能够在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" />

如果你不介意使用插件，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/

img.load（）作为事件不受IE支持。事实上，这是不必要的，$（document）.ready（）函数已经确保加载了img和其他元素。只需将其移除即可。

相关文章：