2010-08-12 135 views
2

我已经尝试使用.load()和.ready()如何在FULL图像加载时进行图像加载? jquery

我的图像非常大,加载时会从上到下加载部分。是否有任何方法可以在图像完全加载并且准备好完全看到时立即显示图像?

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

我想的最后一件事是高达上面的代码...... 任何帮助将是巨大的

感谢

回答

0

我首先创建一个图像对象。然后我定义它是onload函数。之后,我设置了实际的图像位置。请注意,这个例子设置了背景图片。

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

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

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

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

你可以试试这个

不使用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'); 
    }); 
}); 
0

你可以看看使用imagesLoaded plugin来检查图像是否已加载。

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