Load images in order, delayed, fallback for script
I am wondering if anyone has a good clean solution for loading images from top to bottom of the page, waiting for the previous image to load before moving on to the next. And in case the custom dispenser has javascript then fall back to the normal tag <img>
.
There are quite a few lazy loading plugins out there, but I'd like to load all the images as quickly as possible in the order they appear on the website.
The reason for this is that each image is quite large and the user will look rather slowly from top to bottom.
source to share
interest Ask. my approach would be something like this
$(function(){
var loadNext = function(){
var next_guy = $('#imgz img[x-src]').first();
next_guy.prop('src', next_guy.attr('x-src'));
next_guy.removeAttr('x-src');
};
$('#imgz img').on('load',loadNext);
});
#imgz img {
width: 250px;
border: 1px dotted gray;
clear: both;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgz">
<img src="http://i.imgur.com/mThaO.jpg" />
<img x-src="http://i.imgur.com/DO1kZ.jpg" />
<img x-src="http://i.imgur.com/lD2HS.jpg" />
<img x-src="http://i.imgur.com/4vqE3.jpg" />
<img x-src="http://i.imgur.com/TXXbx.jpg" />
<img x-src="http://i.imgur.com/TF3z2.jpg" />
</div>
source to share
try this, add this css first
img{display:none;}
jquery
$("img").each(function(index, value){
$(this).delay(300*index).fadeIn();
});
for backup you can do this, first add this jquery which will only run if js enabled
$(function(){$('body').addClass('jse');});
that is
$("img").each(function(index, value){
$(this).delay(300*index).fadeIn();
});
and in css to be applied if jquery is formulated and body has .jse class
.jse img {display:none;}
source to share
Here's how you can do it:
$(document).ready(function () {
var $images = $("img");
//First hide all images
$images.hide();
function lazyLoad(num) {
$images.eq(num).fadeIn(function () {
if (num != $images.length) {
lazyLoad(++num);
}
});
}
//When first has loaded start fading in
$images.eq(0).load(function () {
lazyLoad(0);
});
});
Take a look here: JSFiddle
source to share