Home > Developer > Web Develop
/Picture unordered preload (function($){functionpreload (IMGS,FNS) { This. imgs= (typeofimgs=== "string")?[Imgs]:imgs; This. fns=$.extend ({},PRELOAD.FNS,FNS);//overlay FNS on preload and add to {} returnif( This. fns.loadmethod== "Unorderload") {//is unordered or orderly This. _unorderload ();}Else{ This. _orderload ();}} Preload.fns={loadmethod:NULL,//orderly or unordered way eachloadimg:NULL,//each picture loads the function that is executedALLLOADIMG:NULL //all pictures loaded with the function you want to execute}preload.prototype._orderload=function(){varimgs= This. Imgs,len=Imgs.length,fns= This. Fns,num=0;functionload () {varimgobj=NewImage (); $ (imgobj). On ("Load Error",function() {Fns.each&&Fns.each ();//presence will executeif(num<Len) {load ();//continue loading function execution is sequential without loading}Else{fns.allloadimg&& fns.allloadimg ();//Load Full part}}); Imgobj.src=Imgs[num];num++;} Load ();} Preload.prototype._unorderload=function(){varimgs= This. Imgs,len=Imgs.length,fns= This. Fns,num=0; $.each (IMGs,function(I,SRC) {if(typeofSrc!= "string")return;varimgobj=NewImage (); $ (imgobj). On ("Load Error",function() {fns.eachloadimg&&fns.eachloadimg (Num,len);if(num==len-1) {fns.allloadimg&&fns.allloadimg ();} Num++;}); IMGOBJ.SRC=src;});} $.extend ({//Add new function preload to jquery:function(IMGS,FNS) {Newpreload (IMGS,FNS);});}) (jQuery);
How to use
<!doctype html>;} img{Width:100%; Vertical-Align:top; }. imgbox{width:500px; margin:100px Auto; } #prevImg, #nextImg {width:60px; Font-size:15px; height:30px; Line-height:30px; Text-Align:center; Background: #686868; Position:absolute; color:#000; Text-Decoration:none; Margin-top:-50px; } #prevImg {left:60g; } #nextImg {left:55%; } </style> <script src= "js/jquery-3.2.1.js" ></script> <script src= "Js/unorderload.js" ></ Script> <script> $(function(){ varimgs=["Img/0.jpg", "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg"]; varlen=imgs.length; varIndex=0; $.preload (imgs,{}); $("#control-img-btn"). On ("Click", "a",function(){ if($( This). Hasclass ("Previmg") ) {Index=math.max (0,--index);//the previous one } Else{Index=math.min (Len-1,++index);//Next One } $("#imgBox img"). attr ("src"), Imgs[index]); }); }); </script>
jquery Picture preloading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
