Question

我有两张图片：

-loading.gif（加载动画）

-scenery.jpeg（这是我想在加载过程后显示的内容）;

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

所以当我点击按钮时如何在加载scenery.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>

Answer 1

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

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

Demo

Answer 2

试试这个：

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

Answer 3

其中一种方式是：

用throbber src替换图片src。
创建新的Image对象，将其设为src为其中一个。
在load上添加Image事件监听器，并在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

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

3 个答案:

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

3 个答案:

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