jQuery图像淡入准备就绪答案

【问题标题】：jQuery images fade-in on readyjQuery图像淡入准备就绪
【发布时间】：2013-03-25 05:01:22
【问题描述】：

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

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

我做错了什么？

编辑： 谢谢！我用 Adeneo 的方法得到了它：http://jsfiddle.net/hAm65/

【问题讨论】：

标签： jquery image

【解决方案1】：

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

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

你可以试试这样的：

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

【讨论】：

别忘了在启动时隐藏图片。
@TahaPaksu - 如果打算将它们淡入，这总是一个好主意。我假设 OP 为此使用 CSS，所以我不会在代码中添加 hide()，因为这通常只会导致烦人的闪烁。

【解决方案2】：

您不能为 document 本身以外的元素调用 .ready。改用这个

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

【讨论】：

【解决方案3】：

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

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

【讨论】：