0

以下代码在 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() { 而不是文档准备好并删除函数来修复它

4

4 回答 4

2

来自.load()的 jQuery API

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

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

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发

它没有正确地冒泡 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 + "%");
});
于 2013-08-12T13:24:36.420 回答
0

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

于 2013-08-12T13:55:37.123 回答
0

从技术上讲，您应该能够在 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" />
于 2013-08-12T13:23:43.980 回答
-3

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

于 2013-08-12T13:25:51.537 回答