Isotope load images progessively -
i using isotope on website have built - used position lots of jpegs, along filtering system - works well, load of page slow think isotope has issues loading lots of images...
the code using below:
$(window).load( function() { // init isotope var $grid = $('.workgridwrapper').isotope({ // options itemselector: '.workgriditem', percentposition: true, masonry: { // use element option columnwidth: '.grid-sizer' }, filter: '.initialload' }); // store filter each group var filters = {}; $('.filtergridinner').on( 'click', 'a', function() { var $this = $(this); // group key var $buttongroup = $this.parents('.button-group'); var filtergroup = $buttongroup.attr('data-filter-group'); // set filter group filters[ filtergroup ] = $this.attr('data-filter'); // combine filters var filtervalue = concatvalues( filters ); // set filter isotope $grid.isotope({ filter: filtervalue }); }); // change is-checked class on buttons $('.filtergridinner .button-group').each( function( i, buttongroup ) { var $buttongroup = $( buttongroup ); $buttongroup.on( 'click', 'li', function() { $buttongroup.find('.filteron').removeclass('filteron'); $( ).addclass('filteron'); }); }); }); // flatten object concatting values function concatvalues( obj ) { var value = ''; ( var prop in obj ) { value += obj[ prop ]; } return value; } i pretty sure window.load function issue...
i have seen notes using imagesloaded - not sure how use without messing current solution.
any advice on making page load quicker? total weight of page 2.1mb 1.7mb of in images - seems take 18 seconds load when test it.
any ideas?
first step can take make sure images optimized web (re-sized & compressed ).
using imagesloaded pretty straight forward, can call isotope functions once images within .workgriditem's loaded.
$(function(){ $grid = $('.workgridwrapper'); $grid.imagesloaded( function() { // init isotope here after images have loaded.. $grid.isotope({..}); }); }); your html markup :
<div class="workgridwrapper"> <div class="workgriditem"><img src=".."/></div> <div class="workgriditem"><img src=".."/></div> </div> however, plugin detect if images loaded , whether or not there broken links . won't improve performance , change fact have large images on page.
what create 2 versions of images : small size ( thumbnails ) & large size ( high resolution ) . load thumbnails first in isotope if user clicks on it, fetch high resolution version.
instead of doing :
<div class="workgriditem"><img src="http://example.com/image.jpg"/></div> do
<div class="workgriditem"> <a href="http://example.com/image.jpg"> <img src="http://example.com/image_thumb.jpg"/> </a> </div> example
$(function() { var $grid = $('#workgridwrapper'), $photos = $grid.find('.workgriditem'), $loadingindicator = $('<div class="loading"><span><img src="http://i.imgur.com/ie7iw.gif" /></span></div>'); // setup isotope , call after images loaded $grid.imagesloaded(function() { $grid.isotope({ animationoptions: { duration: 750, easing: 'linear', queue: false }, itemselector: '.workgriditem', masonry: { columnwidth: 200 }, percentposition: true }); }); // toggle images version function enlargeimage($photo) { $photos.filter('.large').removeclass('large'); $photo.addclass('large'); $grid.isotope('relayout'); } // on click fetch large size image / toggle $photos.find('a').click(function() { var $this = $(this), $photo = $this.parents('.workgriditem'); if ($photo.hasclass('large')) { $photo.removeclass('large'); $grid.isotope('relayout'); } else { if ($photo.hasclass('has-big-image')) { enlargeimage($photo); } else { $this.append($loadingindicator); var $bigimage = $('<img>', { src: this.href }); $('<div>', { 'class': 'big-image' }) .append($bigimage) .appendto($this) .imagesloaded(function() { $loadingindicator.remove() enlargeimage($photo); }); $photo.addclass('has-big-image'); } } return false; }); });body { background: #000; } #workgridwrapper { width: 100%; background: #fff; } .workgriditem { width: 200px; float: left; } .workgriditem.double { width: 480px; } .workgriditem.large { width: 600px; z-index: 3; } .workgriditem.large .small-image, .workgriditem .big-image { display: none; } .workgriditem .small-image, .workgriditem.large .big-image { display: block; } .workgriditem img { display: block; width: 100%; } .workgriditem .loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; background: hsla(0, 0%, 100%, 0.7); } .workgriditem .loading span { position: absolute; left: 50%; top: 50%; } .workgriditem .loading img { width: auto; position: absolute; left: -16px; top: -16px; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.0.0/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script> <div id="workgridwrapper" class="photos clearfix"> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4086/5013039583_26717f6e89_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4144/5013039541_17f2579e33_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4153/5013039741_d860fb640b_b.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8_b.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" /> </a> </div> <div class="workgriditem"> <a href="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg"> <img class="small-image" src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e_b.jpg" /> </a> </div> </div>if isotope image gallery , not links, may want have @ fancybox has nice api.
<div class="workgriditem"> <a href="http://example.com/image1.jpg" rel="group"> <img src="http://example.com/image_thumb1.jpg"/> </a> <a href="http://example.com/image2.jpg" rel="group"> <img src="http://example.com/image_thumb2.jpg"/> </a> </div> $(function(){ var $grid = $('#workgridwrapper'), $photos = $grid.find('.workgriditem a'); $grid.imagesloaded(function() { $grid.isotope({ animationoptions: { duration: 750, easing: 'linear', queue: false }, itemselector: '.workgriditem', masonry: { columnwidth: 200 }, percentposition: true }); //call fancybox $photos.fancybox(); }); }); i hope find useful
Comments
Post a Comment