Question

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

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

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

我如何在插件内部实现这个？什么是检测图像已加载的最干净的方法，以便我可以测量它们的尺寸？

Answer 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;
}

Answer 2

我不确定我完全理解但是在加载完所有图像后会激活。

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

});

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

2 个答案: