Question

我正在创建一个脚本，其中加载到图像就绪，只有当图像完全加载时，加载隐藏并显示图像。

但是，它没有像我计划的那样发生，这是我的代码

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

Answer 1

你能试试吗，

<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/

Answer 2

试试这个：

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

Answer 3

我已编辑你的小提琴正常工作：

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

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

注意：当你编写一个JQuery代码时，忘记加载JQuery库。另外，为了防止缓存的图像，我只是在图像的末尾添加了一个get值。

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

3 个答案: