Script hiệu ứng load hình ảnh lần lượt từ trên xuống

Code giúp hình ảnh trong website của bạn load từ từ theo thứ tự từ trên xuống. Thích hợp cho các website truyện tranh online.

Code có sử dụng tệp jQuery phiên bản 1.4.2. hãy gỡ bỏ nếu website của bạn đã có phiên bản cao hơn.

Xem thử

 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/></script>

<script type="text/javascript" >

$(function(){

$.fn.preloadify = function(options){

var defaults = {
delay:0,
imagedelay:0,
mode:"parallel",
preload_parent:"a",
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:700
};

// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
parent = $(this),
timer,i=0,j=options.imagedelay,counter=0,images = parent.find("img").css({display:"block",visibility:"hidden",opacity:0}),
check_flag = new Array(),
imagedelayer = function(image,time){

$(image).css("visibility","visible").delay(time).animate({opacity:1},options.fadein,function(){ $(this).parent().removeClass("preloader"); });

};

// add preloader to parent or wrap anchor depending on option
images.each(function(){

if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<a class='preloader' />");
else
$(this).parent().addClass("preloader");

check_flag[i++] = false;

});

// convert into image array
images = $.makeArray(images);
counter = 0;

// function to show image
function showimage(i)
{
if(check_flag[i]==false)
{
counter++;
options.oneachload(images[i]);
check_flag[i] = true;
}

if(options.imagedelay==0&&options.delay==0)
$(images[i]).css("visibility","visible").animate({opacity:1},700);
else if(options.delay==0)
{
imagedelayer(images[i],j);
j += options.imagedelay;
}
else if(options.imagedelay==0)
{
imagedelayer(images[i],options.delay);

}
else
{
imagedelayer(images[i],(options.delay+j));
j += options.imagedelay;
}

}

// preload images parallel
function preload_parallel()
{
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
showimage(i);

}
}
}

// shows images based on index with respect to parent container
function preload_sequential()
{

if(images[i].complete==true)
{
showimage(i);
i++;
}
}

i=0;j=options.imagedelay;
// keep on checking after predefined time, if image is loaded
timer = setInterval(function(){

if(counter>=check_flag.length)
{
clearInterval(timer);
options.ondone();

return;
}

if(options.mode=="parallel")
preload_parallel();
else
preload_sequential();

},options.check_timer)
}
})
</script>


<script type="text/javascript">
$(function(){
$("#imagecode1k").preloadify({ imagedelay:500 });
$("#restart").click(function(e){
$("#imagecode1k").preloadify({ imagedelay:500 }); e.preventDefault();
});
});
</script>


<center>
<div id="imagecode1k"><div>
<a href="http://code1k.com"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcS3-VV6DDb5P9zBmJiP6dYXWk5av_OESPdD2czvuON49R5z2Lo&t=1&usg=__woQ5mePbk8zh8dK83aZuz6OTBHM=" /></a><br/>
<a href="http://code1k.com"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSuRSLAdOS51DzPpQoP7JghtxsdmTgIqEVqcenVtehgI2lPvS4&t=1&usg=__4LomYDUyQfdndTtGdR7h17w8SqU=" /></a><br/>
<a href="http://code1k.com"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTSWqlVcOxSp_oA3HMyQm3uJPjTEWmi6wrpzGm77lEol_5I_v0&t=1&usg=__HnhY4bOAUXnLqTT6qDBrMkCOIoM=" /></a><br/>
<a href="http://code1k.com"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQAN9UFtUQaXNlMefwAsTGPw1JJX_4K3xEAjV7zoNtKkzs1PQQ&t=1&usg=__uAklv-W1DdskfnxvJtoaTeCvXLc=" /></a><br/>
<a href="http://code1k.com"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQp9_aoU-_rECgHob0TpwsaNfGuCWcEZsPRyfphu-DsdMKvCEg&t=1&usg=__O7kT7W3BWG9596weLJ2aNbSaIeA=" /></a><br/>
<a href="http://code1k.com"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRvGDmm0XjdOCD7-hoZL5cGNCj_HIIxenFjyq6xZjA99vOqA5E&t=1&usg=__h16x8Pomx3B8f-BHKhAnhKImJVw=" /></a><br/>
<a href="http://code1k.com"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQDmcO_TGbjs2p3pBqtCO564pV4zYUp3R3fhH76mUn0BR2yvD4&t=1&usg=__PhLu4GTbDNRfv-QbKOBmi_J6AGM=" /></a><br/>
<a href="http://code1k.com"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcS3vpSXR5EqhifQvHCdm0Kpp9PXqsPQte6fD4aRBx8K7FUBX1I&t=1&usg=__nDr5AIACnmYPxmNBszrMubB3P0s=" /></a><br/>
<a href="http://code1k.com"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcS-Qz10qWzr763eYwCIRELbyeArw2vepYWHUokgra9RDJazd78&t=1&usg=__bcukFmmmxubPkHg-tvVH4N6Hl2g=" /></a><br/>

</div></div>

</center>