是否可以在网页中从上到下顺序加载图像?
Is it possible to load the images sequentially from top to bottom in webpage?
我想从上到下依次加载一张图片,例如见附图。
- 首次加载:图片 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 解决方案。
只是用一些 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>
第二个请求在视口上加载内容,您可以使用 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>
您可以使用 http://www.appelsiini.net/projects/lazyload 插件。
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
$(function() {
$("img.lazy").lazyload();
});
设置一个函数,在当前索引处加载图像,并在图像加载后递增索引。
使用 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 -->
香草 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>
我想从上到下依次加载一张图片,例如见附图。
- 首次加载:图片 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 解决方案。
只是用一些 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>
第二个请求在视口上加载内容,您可以使用 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>
您可以使用 http://www.appelsiini.net/projects/lazyload 插件。
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
$(function() {
$("img.lazy").lazyload();
});
设置一个函数,在当前索引处加载图像,并在图像加载后递增索引。
使用 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 -->
香草 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>