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 -->

Answer 2

只需要一些jquery行，从上到下依次显示它。它不是在处理堆栈溢出代码段，但您可以在此处尝试：https://jsfiddle.net/wtgjhrv6/。

＆＃13;

$('img').each(function(fadeInImg) {
     $(this).delay(fadeInImg * 500).fadeIn(1000);
   });

＆＃13;

img {
  display:none;
  height:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
</div>

＆＃13;

第二个请求在视口上加载内容，您可以使用wow.js库更快地完成它。你可以在这里试试https://jsfiddle.net/o9aLv51g/

＆＃13;

new WOW().init();

＆＃13;

img {
  height:150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>




<div>
    
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
   <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
    <img class="wow fadeIn" src="http://www.nathab.com/uploaded-files/carousels/TRIPS/Photo-Wolves/2a-Wolves-photo-holdsworth.jpg">
</div>

＆＃13;

Answer 3

您可以使用http://www.appelsiini.net/projects/lazyload插件。

 <img class="lazy" data-original="img/example.jpg" width="640" height="480">

$(function() {
   $("img.lazy").lazyload();
});

Answer 4

Vanilla JS解决方案。

    function init() {
      var imgDefer = document.querySelectorAll(".img-sequence");
      var lastLoadIndex = 0;
      function loadNextImage() {
        if (imgDefer.length === lastLoadIndex) {
          return;
        }
        imgDefer[lastLoadIndex].addEventListener("load", loadNextImage);
        imgDefer[lastLoadIndex].setAttribute(
          "src",
          imgDefer[lastLoadIndex].getAttribute("data-src")
        );
        lastLoadIndex += 1;
      };
      loadNextImage();
    }
    window.onload = init;

<div>
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=0" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=1" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=2" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=3" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=4" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=5" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=6" />
	<img class="img-sequence" data-src="https://picsum.photos/320/320?image=7" />
</div>

是否可以在网页中从上到下依次加载图像？

4 个答案: