solid jquery preloader

Out of context: Reply #2

  • Started
  • Last post
  • 5 Responses
  • Nathan_Adams1

    No loading progress, but try this:

    HTML
    <div class"img-wrap"><img src="placeholder.gif" data-src="realimage.jpg" /></div>

    JQUERY
    $('img').each(function() {
    var imgsrc = $(this).attr('data-src');
    $(this).attr('onload','imgLoaded...
    });

    function imgLoaded(l){
    $(l).closest('.img-wrap').addCla...
    };

    Then knock yourself out with the CSS (maybe have the img set to opacity 0, and fade in to 1 when the loaded class is added to the wrapper div).

    If you want to lazy load, then combine the above with something like jQuery Waypoints.

    Nathan_Adams 1Permalink
    UpvoteDownvote
    Flag
      Show [[ numHiddenNotes ]] more notesAdd Note
      SaveCancel

    View thread