Skip to content

Instantly share code, notes, and snippets.

@niamrox

niamrox/Loading by imagesLoaded plugin

Created August 26, 2017 20:34
Show Gist options
  • Save niamrox/bd76b39383139451340dcd7eeac6e3f3 to your computer and use it in GitHub Desktop.
Save niamrox/bd76b39383139451340dcd7eeac6e3f3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. niamrox created this gist Aug 26, 2017.
    70 changes: 70 additions & 0 deletions Loading by imagesLoaded plugin
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    initApplyImageLoad: function () {
    var $container = $('.site-content');
    var $status = $('#status');
    var $progress = $('progress');

    var supportsProgress = $progress[0] &&
    // IE does not support progress
    $progress[0].toString().indexOf('Unknown') === -1;

    var loadedImageCount, imageCount;

    $(window).load( function() {
    $('.site-content img').wrap("<div class='img-wrap is-loading'></div>");
    // var $item = $('.site-content img').parent();
    // $item.addClass('is-loading');
    // use ImagesLoaded
    $container.imagesLoaded()
    .progress( onProgress )
    .always( onAlways );
    imageCount = $container.find('img').length;
    resetProgress();
    updateProgress( 0 );
    });

    // return doc fragment with
    function getItems() {
    var items = '';
    for ( var i = 0; i < 7; i++ ) {
    items += image.img.src;
    }
    return items;
    }



    function resetProgress() {
    $status.css({ opacity: 1 });
    loadedImageCount = 0;
    if ( supportsProgress ) {
    $progress.attr( 'max', imageCount );
    }
    }

    function updateProgress( value ) {
    if ( supportsProgress ) {
    $progress.attr( 'value', value );
    } else {
    // if you don't support progress elem
    $status.text( value + ' / ' + imageCount );
    }
    }

    // triggered after each item is loaded
    function onProgress( imgLoad, image ) {
    // change class if the image is loaded or broken
    var $item = $( image.img ).parent();
    $item.removeClass('is-loading');
    if ( !image.isLoaded ) {
    $item.addClass('is-broken');
    }
    // update progress element
    loadedImageCount++;
    updateProgress( loadedImageCount );
    }

    // hide status when done
    function onAlways() {
    $status.css({ opacity: 0 });
    }
    },