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

时间:2009-08-16 21:24:06

标签: jquery image plugins webkit google-chrome

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

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

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

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

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

});