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

我想要逐个加载图像从上到下按顺序排列，例如看到附加的图像。是否可以在网页中从上到下依次加载图像？

首先负载：图片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解决方案。

来源

2017-04-20 Usman Arshad

好图，但如果是你的代码？ – nashcheez

请参阅[jQuery.imageloader（）]（http://beatak.github.io/jquery-imageloader/） – Alessandro

@nashcheez谢谢，代码已添加。 –

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

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

来源

2017-04-20 16:03:45

它看起来不错，我正在测试它，然后我会接受答案。感谢你的伟大代码。 –

我测试过了。非常感谢你的帮助，你做出了和我所期望的完全相同的东西，你是一个天才。 –

很高兴帮助。 –

只是一些jquery行从上到下依次显示它。它不适用于堆栈溢出片段，但您可以在此尝试：https://jsfiddle.net/wtgjhrv6/。

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

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

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

时，它的视口2号请求负载的内容，你可以使用wow.js库做得更快。您可以尝试在这里https://jsfiddle.net/o9aLv51g/

new WOW().init();

img { 
 
    height:150px; 
 
}

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

来源

2017-04-20 13:41:38 vlk

感谢您的工作，但这不是我所期望的，请参阅您的代码将所有图像加载在一起，而不是按顺序加载。 https://jsfiddle.net/o9aLv51g/1/ –

请阅读评论，试试jsfiddle。第一次按顺序加载它，第二个加载图像就是在视口上。我已经把js小提琴链接来测试它。 – vlk

我已经试过了你的jsfiddle，它在视口上依次加载图像。如果你想添加一些延迟，使其更加可见，请添加** ** – vlk

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

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

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

来源

2017-04-20 13:55:03

这是个不错的插件，但没有做我期望的，它在view-port内部可见时加载图像，我想逐个从上到下地加载图像。 –

然后@vlk答案似乎确定 –

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

回答

相关问题