正在加载，直到图像准备就绪，图像隐藏，直到准备就绪

我正在制作一个脚本，在该脚本中图像已准备就绪，并且只有在图像完全加载后才显示加载隐藏和图像。正在加载，直到图像准备就绪，图像隐藏，直到准备就绪

但是，情况并非如此，因为我的计划，这里是我的代码

HTML

<script src="jquery/jquery-1.9.1.js"></script> 
<script src="loading.js"></script> 
<link rel="stylesheet" type="text/css" href="loading.css"/> 

<body>  
    <img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg"/> 
    <img id="loading" src="loading.gif"></img> 
</body>

jQuery的

if ($("#image").ready()) { 
    // code 
    $("#image").show(); 
} else { 
    $("#image").hide(); 
} 

if ($("#image").ready()) { 
    // code 
    $("#loading").hide(); 
} else { 
    // code 
    $("#loading").show(); 
}

CSS

#loading { 
    width:200px; 
    height:200px; 
}

Here is a fiddle

来源

2013-11-24 user3024503

你可以试试这个，

<script> 
    function ImageLoad($this){  
    $($this).show(); 
    $('#loading').hide(); 
    console.log('image loaded'); 

}  
</script> 
<img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg" style="display:none;" onload="ImageLoad(this)"/> 
<img id="loading" src="http://sierrafire.cr.usgs.gov/images/loading.gif"></img>

演示：http://jsfiddle.net/TPbU8/1/

来源

2013-11-24 06:57:11

谢谢你的工作！ – user3024503

试试这个：

HTML：

<div class="loader"></div> 
<img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg"/>

的CSS：

.loader { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background: url('http://sierrafire.cr.usgs.gov/images/loading.gif') 50% 50% no- repeat rgb(249,249,249); 
}

的jQuery：

$(document).ready(function(){ 
    $(".loader").fadeOut("slow"); 
});

检查演示在这里：Demo

来源

2013-11-24 07:09:09

我编辑了自己的小提琴正常工作：

http://jsfiddle.net/TPbU8/3/

if ($("#image").ready()) { 
//code 
    $("#loading").hide(); 
    $("#image").show(); 
}

注：此外，当你在写一个jQuery代码doent忘记加载的JQuery library.Also只是为了防止缓存图像从diplaying我只是在图像的末尾添加一个get值。

来源

2013-11-24 07:10:35 Zword

正在加载，直到图像准备就绪，图像隐藏，直到准备就绪

回答

相关问题