同位素加载图像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

回答

相关问题