jquery - 如何确保将图像加载到JQuery插件中？

在创建需要图像尺寸的JQuery插件时，我发现像Chrome这样的Webkit浏览器通常会以并行方式加载图像，因此返回的图像大小为0。

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

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

我将如何在插件本身中实现此功能？检测图像是否已加载以便可以测量其尺寸的最干净方法是什么？

最佳答案

图片具有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;
}

关于jquery - 如何确保将图像加载到JQuery插件中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1285375/