如何延迟图像加载，以便在加载图像之前显示loading.gif 2或3秒？（使用jQuery/javascript）_Javascript_Jquery_Ajax

如何延迟图像加载，以便在加载图像之前显示loading.gif 2或3秒？（使用jQuery/javascript）

javascript jquery ajax

如何延迟图像加载，以便在加载图像之前显示loading.gif 2或3秒？（使用jQuery/javascript）,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有两张照片： -loading.gif（这是加载动画） -布景.jpeg（加载过程后要显示的内容）因为布景.jpeg是一个小文件，所以使用load（）函数只会跳过loading.gif 那么，当我点击按钮时，如何在加载booking.jpeg之前显示loading.gif 3秒钟提前谢谢D 我有一个html文件： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.1

我有两张照片：

-loading.gif（这是加载动画）

-布景.jpeg（加载过程后要显示的内容）

因为布景.jpeg是一个小文件，所以使用load（）函数只会跳过loading.gif

那么，当我点击按钮时，如何在加载booking.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>


$（文档）.ready（函数（）{
$（“#加载，#图片”）.hide（）；
$（“#按钮1”）。单击（函数（）{
/*loading.gif会在3秒后显示，而scanner.jpeg将使用fadeIn（）*/
});
});
点击我！
>

试试这个：

$('#loading, #picture').hide();
$('#button1').on('click', function() {
  $('#loading').show();
  setTimeout(function() {
    $('#loading, #picture').toggle();
  }, 3000);
});

其中一种方法是：

将图像

src

替换为throbber

src

创建新的

图像

对象，将其设置为

src

图像之一

在

图像

上添加

加载

事件侦听器，并在

设置超时

内设置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);

在这种情况下，您可以使用：

$("#button1").click(function(){
    $("#loading").fadeIn().delay(3000).fadeOut('slow', function() {
       $(this).next().fadeIn() 
    });
});

尝试使用

setTimeout

人为地等待用户似乎很残忍。为什么有些人认为让他们的网页变慢是个好主意？是的，关于setTimeout:|对不起，我对javascript及其功能还不熟悉如何使用setTimeout功能？@Blazemonger Bro我不想让我的网页变慢：D哈哈，我只是想学习/了解延迟函数和东西：）嘿，谢谢你的回答：D它是有效的，但是，你能解释一下这句话吗$（this.next（）.fadeIn（）；嗯，我如何指定下一个fadeIn元素？@Twish可以帮助您找到

加载.gif

图像的下一个同级元素，在这种情况下，它是

布景.jpeg

。谢谢！现在我知道了：D但最后，如果图像很大，那么加载需要3秒钟以上，如何延长加载.gif直到加载scapeuting.jpeg？你确定这是正确的吗？粘贴更新的代码时，屏幕上没有显示任何内容。：）@Twish忽略我的更新，我只是注意到您的图像已经在页面加载中加载，因为它存在于DOM中，所以您只需要

显示

和

隐藏

它即可。