Question

我尝试过使用.load（）和.ready（）

我的图像非常大，当它加载时，它会从上到下分段加载。有什么方法可以让图像在完全加载并准备好完全看到时立即显示出来吗？

$('img.touch').hide();
$('img.touch').ready(function() {
$('img.touch').show();
});

我尝试的最后一件事就是上面的代码...... 任何帮助都会很棒

由于

Answer 1

我首先创建一个图像对象。然后我定义它的onload函数。然后我设置了实际的图像位置。请注意，此示例设置背景图像。

var img = document.createElement('img')
img.onload = function(){
    //image only loads when finished
    div.style.backgroundImage = 'url(' + imgLocation + ')'        
}
img.src = imgLocation

Answer 2

我可以看到一个解决方案，你可以做这样的事情：

$(document).ready(function () {
    $("img.touch").attr("hidden", true);

    $("img.touch").load(function () {
        $(this).attr("hidden", false);
    });
});

Answer 3

你可以试试这个

不使用jquery：

<img src="some.jpg" style="visibility:hidden;" onload="this.style.visibility='visible';" />

查询：

$(document).ready(function(){
    $('img.touch').one('load',function(){
         $(this).css('visibility','visible');
    }).each(function(){
        if(this.complete)  $(this).trigger('load');
    });
});

Answer 4

您可以使用imagesLoaded plugin查看图片是否已加载。

该插件还具有允许缓存图像的好处。

加载FULL图像时如何加载图像？ jQuery的

4 个答案: