如何确保在 JQuery 插件中加载图像？答案

【问题标题】：How to ensure images are loaded inside a JQuery plugin?如何确保在 JQuery 插件中加载图像？
【发布时间】：2009-08-16 21:24:05
【问题描述】：

在创建需要图像尺寸的 JQuery 插件时，我发现像 Chrome 这样的 webkit 浏览器经常返回 0 大小的图像，因为它们是并行加载的。

我快速而肮脏的解决方案是将调用我的插件的代码包装在 $(window).load() 事件中：

$(document).ready(function() {
    $(window).load(function() {
        $('.magnifier').magnifier();
    });
});

我将如何在插件本身内实现这一点？检测图像已加载以便我测量其尺寸的最简洁方法是什么？

【问题讨论】：

标签： jquery image plugins webkit google-chrome

【解决方案1】：

图像有一个 load() 事件，因此您可以执行以下操作：

$(document).ready(function() {
    $('.magnifier').magnifier();
});

$.fn.magnifier = function() {
    return this.each(function() {
        $(this).find('img').load(function() {
            // do something to image when it is loaded
        });
    });
}

您也可以简单地将代码包裹在插件本身的 window.load 周围：

$.fn.magnifier = function() {
    var that = this;
    $(window).load(function() {
        that.each(function() {
            $(this).find('img').each(function() {
                // image would be loaded at this point
            });
        });
    });
    return this;
}

【讨论】：

【解决方案2】：

我不确定我是否完全理解，但这会在所有图像加载后触发。

$("img").load(function() { 

});

【讨论】：