jquery - 是否可以在网页中从上到下顺序加载图像？

Question

我想从上到下依次加载图像，例如见附图。

• 第一次加载:图片 01
• 当完全加载图像 01 然后加载图像 02,
• 当完全加载图像 02 然后加载图像 03 等等...

.my-container {
  width: 1060px;
  margin: 0 auto;
  padding: 50px;
}
img {
  margin: 0 auto 35px;
  display: block;
  width: 100%;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-container">
  <div class="portfolio">
    <img alt="image 01" width="960" height="640" src="http://i.imgur.com/wIfbFMu.jpg">
    <img alt="image 02" width="960" height="640" src="http://i.imgur.com/thiOajQ.jpg">
    <img alt="image 03" width="960" height="720" src="http://i.imgur.com/YgIxbVF.jpg">
    <img alt="image 04" width="960" height="640" src="http://i.imgur.com/Xt6R20O.jpg">
    <img alt="image 05" width="960" height="625" src="http://i.imgur.com/XENpTvq.jpg">
    <img alt="image 06" width="960" height="638" src="http://i.imgur.com/qBMOAgZ.jpg">
  </div>
</div><!-- .my-container -->

我更喜欢 jQuery 解决方案。

Answer 1

设置一个函数，在当前索引处加载图像，并在图像加载后递增索引。

使用 data-src 属性可以使图像在 URL 被放入 src 属性之前不会加载。

我添加了一个控制台日志来显示图像正在按顺序加载。

$(function () {
   var $images = $('.portfolio img');
   var lastLoadIndex = 0;
   var loadNextImage = function () {
      if ($images.length === lastLoadIndex) {
          return;
      }
console.log('loading image at index ' + lastLoadIndex);
      $images.eq(lastLoadIndex).attr('src', $images.eq(lastLoadIndex).attr('data-src'));
      lastLoadIndex += 1;
   };
   $images.on('load', loadNextImage);
   loadNextImage();
});

.my-container {
  width: 1060px;
  margin: 0 auto;
  padding: 50px;
}
img {
  margin: 0 auto 35px;
  display: block;
  width: 100%;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-container">
  <div class="portfolio">
    <img alt="image 01" width="960" height="640" data-src="http://i.imgur.com/wIfbFMu.jpg">
    <img alt="image 02" width="960" height="640" data-src="http://i.imgur.com/thiOajQ.jpg">
    <img alt="image 03" width="960" height="720" data-src="http://i.imgur.com/YgIxbVF.jpg">
    <img alt="image 04" width="960" height="640" data-src="http://i.imgur.com/Xt6R20O.jpg">
    <img alt="image 05" width="960" height="625" data-src="http://i.imgur.com/XENpTvq.jpg">
    <img alt="image 06" width="960" height="638" data-src="http://i.imgur.com/qBMOAgZ.jpg">
  </div>
</div><!-- .my-container -->