javascript - 正在加载直到图像准备好并且图像隐藏直到它准备好

标签 javascript jquery html css

我正在制作一个脚本,在该脚本中,加载一直持续到图像准备就绪,只有当图像完全加载时,加载才会隐藏并显示图像。

但是,这并没有按照我的计划发生,这是我的代码

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

最佳答案

你能试试这个吗,

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

关于javascript - 正在加载直到图像准备好并且图像隐藏直到它准备好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20171930/

相关文章:

javascript - 如何使用 YUI Compressor 自动压缩 JavaScript 文件?

javascript - 尝试从表中列中的文本框获取值

javascript - 防止 jQuery 动画排队

Javascript - 在加载另一个函数之后*运行函数?

javascript - 如何在 Element UI 的表格行中显示动态信息

javascript - 如何为 touchstart/touchend 事件禁用按钮?

javascript - 获取使用 :before and :after 合成的元素的实际高度

javascript - 使用 JQuery 替换一页上的多个 HTML 实例

html - 使 HTML 输出 R 中的粗体文本 Shiny

php - 对 SEO 友好的 PHP 链接感到困惑