jquery - jQuery图像淡入准备就绪

Question

我目前正在处理一个包含一些非常大的图像的项目。为了在加载图像时产生平滑的淡入效果，我尝试在 jQuery 1.9.1 中使用 ready()，但由于某种原因，它不起作用并在加载之前显示图像。

$("img").ready(function(){
$(this).fadeIn("slow");
});

我究竟做错了什么？

编辑： 谢谢！我用 Adeneo 的方法让它工作：http: //jsfiddle.net/hAm65/

Answer 1

从DOCS中，只有文档具有就绪事件：

.ready() 方法只能在匹配当前文档的 jQuery 对象上调用。

您可以尝试更多类似的方法：

$("img").each(function(i,el){
    var img = new Image();
        img.onload = function() {
            $(el).fadeIn("slow");
        }
        img.src = el.src;
});

Answer 2

你不能调用自身.ready以外的元素document。改用这个

$("img").on('load', function(){
  $(this).fadeIn("slow");
});

Answer 3

如果要加载多个图像并且需要等待所有图像完成，请尝试使用 jQuery延迟对象：

function loadImages(src) {
    var deferred = $.Deferred();
    var image = new Image();
    image.onload = function() {
        deferred.resolve();
    };
    image.src = src;
    return deferred.promise();
}

以这种方式使用它 -

var loaders = [];
loaders.push(loadImage('1.png'));
loaders.push(loadImage('2.png'));
loaders.push(loadImage('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});