[英]How do I delay the loading of an Image, so that i can display a loading.gif for 2 or 3 seconds before the image loads? (using jQuery/javascript)
我有两个图像：
-loading.gif（正在加载动画）
-scenery.jpeg（这是我要在加载过程之后显示的内容）；
因为scenery.jpeg是一个小文件，所以使用load（）函数只会跳过loading.gif
所以，当我单击按钮时，如何在它加载Scene.jpeg之前显示loading.gif 3秒钟？
提前谢谢！ ：d
所以我有这个HTML文件：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#loading , #picture").hide();
$("#button1").click(function(){
/* the loading.gif shows then after 3 seconds scenery.jpeg will use fadeIn() */
});
});
</script>
</head>
<body>
<button id="button1">Click Me!</button>
<img id="loading" src="loading.gif"/>>
<img id="picture" src="scenery.jpeg"/>
</body>
</html>
试试这个：
$('#loading, #picture').hide();
$('#button1').on('click', function() {
$('#loading').show();
setTimeout(function() {
$('#loading, #picture').toggle();
}, 3000);
});
一种方法是：
src与活动指示器src 。 Image对象，将其src设置为image之一。 Image上添加load事件侦听器，并在setTimeout中将img src设置为所需的值。 该函数执行以下操作：
function delayLoad (img, throbber, delay) {
var src = img.src,
hidden = new Image();
img.src = throbber;
hidden.addEventListener("load", function (e) {
setTimeout(function () {
img.src = src;
}, delay);
});
hidden.src = src;
}
像这样使用它：
delayLoad(document.querySelector("img"), "http://www.mfshop.ru/images/throbber.gif", 3000);
JSBin 。
jQuery图像预加载器（如何使loading.gif出现得更快）
[英]Jquery image preloader (how do i get the loading.gif to appear faster)
如何在图片库部分显示“ AJAX Loading.gif”？ （jQuery的）
[英]How to make display “AJAX Loading.gif” at image gallery section? (jQuery)
如何在页面加载时异步加载图像并在加载时显示加载gif？
[英]how can I asynchronously load an image on page load and display a loading gif while it loads?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.