Question

我遵循本教程

https://www.resrc.it/demos/lazyload

这是我使用

的代码

<script src="https://use.resrc.it/0.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://rawgit.com/resrcit/ReVIEW/master/jquery.review-1.0.0.min.js"></script>
<script>
  $(document).ready(function () {
    resrc.ready(function () {
      $('.resrc').review({
        callback : function () {
          resrc.run(this);
        }
      });
    });
  });

以上用于延迟加载图像，并使用以下方法调用：

<img data-src="http://app.resrc.it/o=95/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>

在我的例子中，我有10张图片，在加载下一张图片之前我想要2秒钟。我不知道在哪里放置jQuery的setTimeout函数。当我把它延迟2秒钟而不是加载所有图像时没有任何延迟。我希望它加载图像1等待2秒，加载图像2等待2秒，加载图像3等待2秒等等...

Answer 1

这更像是一个普通的JS解决方案而非实际的场景解决方案，但是，对于10个图像的情况，如果你想改变它的显示设置，延迟加载可能会限制你的需要，所以也许你＆＃39;仍然会考虑这一点。

如果您愿意，也可以将timedImg();初始化放在jQuery $(document).ready();中。

＆＃13;

function timedImg() {
  var image1 = document.getElementById("img1"),
    image2 = document.getElementById("img2"),
    image3 = document.getElementById("img3"),
    image4 = document.getElementById("img4"),
    image5 = document.getElementById("img5"),
    image6 = document.getElementById("img6"),
    image7 = document.getElementById("img7"),
    image8 = document.getElementById("img8"),
    image9 = document.getElementById("img9"),
    image10 = document.getElementById("img10");
  setTimeout(function() {
    image1.style.visibility = "visible"
  }, 0);
  setTimeout(function() {
    image2.style.visibility = "visible"
  }, 2000);
  setTimeout(function() {
    image3.style.visibility = "visible"
  }, 4000);
  setTimeout(function() {
    image4.style.visibility = "visible"
  }, 6000);
  setTimeout(function() {
    image5.style.visibility = "visible"
  }, 8000);
  setTimeout(function() {
    image6.style.visibility = "visible"
  }, 10000);
  setTimeout(function() {
    image7.style.visibility = "visible"
  }, 12000);
  setTimeout(function() {
    image8.style.visibility = "visible"
  }, 14000);
  setTimeout(function() {
    image9.style.visibility = "visible"
  }, 16000);
  setTimeout(function() {
    image10.style.visibility = "visible"
  }, 18000);
}

timedImg();

＆＃13;

img {
  visibility: hidden;
}

＆＃13;

<img src="https://placehold.it/100x100" alt="An awesome dog" id="img1" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img2" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img3" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img4" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img5" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img6" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img7" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img8" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img9" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img10" />

＆＃13;

jquery - 延迟加载 - 设置延迟

1 个答案: