仅在加载时才加载图像

Question

我只想加载图像时才加载图像。

这不是工作，因为图像加载前级“隐藏”被删除：

$(function(){ 
$('#nowplaying').load('nowplaying.php', function() { 
    $('#images').removeClass('hidden'); 
} 
)}); 

我能做什么？

编辑：这里是我的代码：

在index.php文件，我有：

<script type="text/javascript"> 
$(function(){ 
$('#nowplaying').load('nowplaying.php'); 
}); 
var auto_refresh = setInterval(
function() 
{ 
$('#nowplaying').load('nowplaying.php').fadeIn("slow"); 
}, 10000); // refresh every 10000 milliseconds 
</script> 

在nowplaying.php我有这个div：

echo "<div id="images">; 
foreach ($jpg_files as $file) { 
if (file_exists($cover_path."\\\\".$file) && $file!="f.jpg") { 
$file = urlencode($file); 
echo "<a href=\"getimage.php?img=".$file."\" target=\"_blank\"> 
<img src=\"getimage.php?img=".$file."&p=".$cover_path."\" /></a>"; 
echo "&nbsp;&nbsp;&nbsp;&nbsp;"; 
} 
echo "</div>; 

我想显示图像只有当它们被加载时（我不希望用户在浏览器中看到图像），才能使用div id #images。

怎么办呢？

有人可以发送一个简单的例子waitForImages？ 它根本不适用于我。

编辑15年12月12日： 这是工作：

<img style="display:none;" src="big3.jpg"> 
<script type="text/javascript"> 
$('img').load(function(){ 
    $(this).css({'display':'block'}) 
}); 
</script> 

但是，这是行不通的，为什么呢？ ：

<div style="display:none;"> 
    <img src="big3.jpg"> 
</div> 
<script type="text/javascript"> 
$('div').load(function(){ 
    $(this).css({'display':'block'}) 
}); 
</script> 

还是不知道为什么。但是，这是工作，如果IMG有正常的src： 下面的DIV：

<script type="text/javascript"> 
$(document).ready(function(){ 
$("div.images").hide(); 
$("div.images").find("img").load(function(){ 
$(this).closest("div.images").show(); 
}); 
}); 
</script> 

现在，这里是我的大问题： 我的图片src的调用脚本：

<img src=\"getimage.php?img=".$file."\" />"; 

我怎样才能使它工作有了这个？

Answer 1

它解决了你的问题吗？

$('#images').load(function(){ 
    $(this).removeClass('hidden'); 
}); 

Answer 2

也许你需要我的插件 - http://archive.plugins.jquery.com/project/BatchImagesLoad

然后所有图像加载后，你可以再做一次手术。

Answer 3

$('img').load()是不可靠的，不能跨浏览器工作。 我想用waitForImages之类的东西：https://github.com/alexanderdickson/waitForImages