jquery - Showing loading gif only till certain amount of images are loaded -


i have site fullscreen background carousel , loading gif on window load. problem depending on site, have 10 40 images in carousel, means loading gif spinning way long time.

i'm thinking idea display loading gif till first 5 images loaded. that, plus 10 seconds every image shown, gives enough time other images load.

the problem don't know how approach solution. thoughts?

here's jquery:

<script type="text/javascript">   var image = new image();   image.src = 'img/loading.gif'; //<![cdata[   $(window).load(function() { // makes sure whole site loaded     $('#status').fadeout(); // first fade out loading animation     $('#preloader').delay(350).fadeout('slow', function(){       $( "#carousel-example-generic" ).attr('data-ride', "carousel");     }); // fade out white div covers website.     $('body').delay(350).css({'overflow':'visible'});   }); //]]> </script>

and piece of html:

<div id="carousel-example-generic" class="carousel slide" data-ride="0">  <div class="carousel-inner">  <div class="item active">     <img src="./img/1.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/2.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/3.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/4.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/5.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/6.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/7.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/8.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/9.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div>   <div class="item">     <img src="./img/10.jpg" alt="" />     <div class="container">       <div class="carousel-caption">       </div>     </div>   </div> </div>

found nice , easy way!

<script>   var numimagesloaded = 0; function incrementandcheckloading(){     numimagesloaded++;     if(numimagesloaded == 3){         //kill loading screen, launch carousel     } }      image1 = new image(); image1.src = "img/1.jpg" image1.onload = incrementandcheckloading; image2 = new image(); image2.src = "img/2.jpg" image2.onload = incrementandcheckloading; image3 = new image(); image3.src = "img/3.jpg" image3.onload = incrementandcheckloading; </script>

with script, loading screen disappear when firsts 3 images loaded, , because each image displays during x amount of seconds, site has time load other images on back.

thanks dtech, found here.


-

Comments

Post a Comment

Popular posts from this blog

php - regexp cyrillic filename not matches -

i take list of files php glob(."*.pdf") . files have cyrillic names. example: ООО «Рога и копыта» then load company names database , try find them in file names: preg_match("/$firm_name/ui", $file_name, $match); i have problem: firms if $firm_name visually similar $file_name , preg_match says there no match. mb_detect_encoding both variables return utf-8. there problem in file name, or maybe there encoding or something, can not understand, ask help. upd: $file_name='ООО «Рога и копыта»'; preg_match("/... .Рога и копыта./ui", $file_name, $match); as result, ОО «Рога и копыта» , 1 О missing
Read more

c# - OpenXML hanging while writing elements -

Image
i have program pulls data database, caches file , exports data multiple formats (excel, excel 2003, csv). i'm using openxml sdk 2.0 excel work. these export processes run in parallel (using parallel.foreach ), , amount of data can pretty large - e.g. csvs 800mb. during these larger exports, i've noticed writing of xml documents hang. instance, if have 8 exporting in parallel, @ point "pause". hang around same point: //this.writer openxmlwriter created worksheetpart. this.writer.writeelement(new cell() { cellvalue = new cellvalue(value), datatype = cellvalues.string }); when happens, pause debugger (vs2013 in case) , notice threads blocking around same portion of code - bit deeper in openxml sdk - stem call openxmlwriter.writeelement . i dug through source using justdecompile didn't find answers. appears there intermediary stream in use writing isolated storage , is, reason, blocking. underlying stream each of these filestream . here screenshot ...
Read more

sql - Select Query has unexpected multiple records (MS Access) -

i may tired, can't seem figure out happening. have 2 queries. query 1 has 10 fields. query 2 has 5 fields. fields 1 through 3 same in both queries. trying write select query , simple add field 5 query2 query1 result should query1 additional field (query2.field5). i join first 3 fields both queries , choose select records in query1 , in query2 match. don't know sql, use query designer. expect same number of records have query 1 instead have 3 times or more. can tell me doing wrong. tried reversing joins still seem same records. thanks in advance. here query: the fields in common divisionname , supplierid = vendorid , commodityname . select [part revenue exposed query p1].divisionname, [part revenue exposed query p1].commodityname, [part revenue exposed query p1].suppliername, [part revenue exposed query p1].partnumber, [part revenue exposed query p1].partdescription, [part revenue exposed query p1].bucode, ...
Read more