同位素加載圖像progessively

我正在使用我建立的網站上的同位素 - 它用於定位大量的JPEG，以及一個過濾系統 - 這效果很好，但頁面的負載是緩慢的，因爲我認爲同位素有有些問題加載大量的圖片...同位素加載圖像progessively

我使用的代碼如下：

$(window).load(function() { 
    // init Isotope 
    var $grid = $('.workGridWrapper').isotope({ 
    // options 
    itemSelector: '.workGridItem', 
    percentPosition: true, 
    masonry: { 
    // use element for option 
    columnWidth: '.grid-sizer' 

    }, 

    filter: '.InitialLoad' 

    }); 

    // store filter for each group 
    var filters = {}; 

    $('.filterGridInner').on('click', 'a', function() { 
    var $this = $(this); 
    // get group key 
    var $buttonGroup = $this.parents('.button-group'); 
    var filterGroup = $buttonGroup.attr('data-filter-group'); 
    // set filter for group 
    filters[ filterGroup ] = $this.attr('data-filter'); 
    // combine filters 
    var filterValue = concatValues(filters); 
    // set filter for 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'); 
     $(this).addClass('filterOn'); 
    }); 
    }); 

}); 

// flatten object by concatting values 
function concatValues(obj) { 
    var value = ''; 
    for (var prop in obj) { 
    value += obj[ prop ]; 
    } 
    return value; 
}

我敢肯定的window.load功能是問題...

我見過筆記關於使用imagesLoaded - 但不知道如何使用它而不會搞亂我目前的解決方案。

任何關於使頁面加載更快的建議？該頁面的總重量僅爲2.1MB，其中1.7MB是圖像 - 但是當我測試它時，似乎需要18秒才能加載。

任何想法？

來源

2016-01-05 dubbs

看看這個codepen同時使用ImagesLoaded +同位素插件。 HTTP：// codepen。io/desandro/pen/bsHix –

謝謝 - 我真的想要適應我已經寧可使用另一種解決方案 – dubbs

您可以採取的第一步是確保所有圖像都針對網頁進行了優化（重新調整大小的&已正確壓縮）。

使用ImagesLoaded是非常簡單的，你可以在s的加載.workGridItem」稱，一旦圖像您同位素的功能。

$(function(){ 
    $grid = $('.workGridWrapper'); 
    $grid.imagesLoaded(function() { 
    // Init isotope here after images have loaded.. 
    $grid.isotope({..}); 
    }); 
});

你的HTML標記會是這個樣子：

<div class="workGridWrapper"> 
    <div class="workGridItem"><img src=".."/></div> 
    <div class="workGridItem"><img src=".."/></div> 
</div>

然而，如果圖像加載所有的這個插件的作用是檢測，以及是否有任何損壞的鏈接。它不會提高性能並改變您在頁面上顯示大圖片的事實。

我會做的是創建兩個版本的圖像：小尺寸（縮略圖）&大尺寸（高分辨率）。首先在同位素中加載縮略圖，然後如果用戶點擊它，則獲取高分辨率版本。

而不是做的：

<div class="workGridItem"><img src="http://example.com/image.jpg"/></div>

做

<div class="workGridItem"> 
    <a href="http://example.com/image.jpg"> 
    <img src="http://example.com/image_thumb.jpg"/> 
    </a> 
</div>

例

$(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 and call after Images are 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>

如果你的同位素是一個圖像庫，而不僅僅是鏈接，你可能想看看FancyBox，它有一個很好的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(); 
    }); 

});

我希望你覺得它有用

來源

2016-01-06 20:34:05

感謝您的冗長迴應Raja - 我發現了另一個因素造成頁面緩慢加載與同位素有關 - 所以想想，我對於使用同位素的解決方案其實已經可以。感謝您提出新解決方案的努力。 – dubbs

沒問題，祝你好運！ –

同位素加載圖像progessively

回答

相關問題