Indicator pentru imaginile încărcate

Ieri a trebuit să fac un preloader pentru un site ce conține foarte multe imagini (peste 50 bucăți, fiecare de minim 100kb). Am zis că dacă tot fac preloader, să fac și un indicator. Și dacă tot le-am făcut, hai să pun și pe blog :)

jQuery(document).ready(function($){
  var allImages     = $('img'),
      totalImages   = allImages.length,
      loadedImages  = 0,
      preloader     = $('<div class="preloadImages">Loading <span></span>%</div>').appendTo('body');

  $(allImages).each(function(i, img){
    var preload = new Image();
    preload.onload = function(){
      $('span', preloader).text( Math.round( loadedImages / totalImages * 100 ) );
      loadedImages = loadedImages + 1;
      if( loadedImages >= totalImages ){
        preloader.fadeOut();
      }
    }
    preload.src = img.src;
  });
});

Este atât de simplu!

6 Comentarii to “Indicator pentru imaginile încărcate”

  1. Merge cum te-ai aştepta în Chrome şi IE, în FF încă se încarcă imaginile după ce dispare loader-ul. Adică se manifestă bug-ul ăsta: https://bugzilla.mozilla.org/show_bug.cgi?id=626613

    Testul l-am făcut pe vreo 11 imagini 1080p luate de pe interfacelift.com

    FF 18.0.1, Win7

  2. Nu ştiu dacă şi alţii au mai problema din comentariul precedent dar la mine s-a rezolvat folosind un setInterval.

    http://pastebin.com/gy2NZce6

  3. Staicu Ionuț-Bogdan

    Radu: cred că se întâmplă ceva ciudat. Am trecut acum totul prin fiddler (să fiu sigur că nu se încarcă mai repede decât pot observa) iar în firefox este totul OK…

    Poate că tu afișezi imaginile înainte de a rula scriptul, iar când rulează scriptul imaginile sunt deja încărcate?

  4. Din câte ştiu $(document).ready te lasă să lucrezi imediat ce DOM-ul este disponibil deci nu după ce s-au încărcat resursele.

    Apoi, dacă te uiţi niţel pe pastebin-ul din comentariul precedent se vede că dau un hide DIV-ului părinte care coţine imaginile şi abia apoi încep prelucrările.

  5. Acum îmi dau seama că pastebin-ul ăla este cu soluţia modificată dar şi în varianta originală foloseam un “hide()” pentru elementul părinte. În orice caz e bine că se poate şi altfel pentru cine are probleme. :)

  6. Slava ție Jqueriule!

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>