同位素负载图像负载

时间：2016-01-05 20:01:42

标签： isotope

我在我建立的网站上使用Isotope--它用于定位大量的JPEG，以及过滤系统 - 这很好用，但页面的负载很慢，因为我认为Isotope有一些问题加载很多图像...

我使用的代码如下：

while (ifs.tellg() != -1) {
    getline(ifs, &scrap);
    size_t pos = scrap.find("<table", 0);
    if (pos != string::npos) {
        // You have found your target! Do whatever you want.
    }
}

我很确定$(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的注释 - 但不确定如何使用它而不会弄乱我当前的解决方案。

有关加快页面加载的任何建议吗？页面的总重量仅为2.1MB，图像中的重量为1.7MB - 但在测试时加载似乎需要18秒。

有什么想法吗？

1 个答案:

答案 0 :(得分：1)

您可以采取的第一步是确保所有图片都针对网络进行了优化（重新调整大小并正确压缩）。

使用 ImagesLoaded 非常简单，一旦加载.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>

但是，所有这个插件都会检测是否加载了图像以及是否存在任何断开的链接。它不会提高性能并改变页面上有大图像的事实。

我要做的是创建两个版本的图像：小尺寸（缩略图）＆amp;大尺寸（高分辨率）。首先在同位素中加载缩略图，然后如果用户点击它，则获取高分辨率版本。

而不是：

<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>

如果您的同位素是图片库而不仅仅是链接，您可能需要查看具有良好API的FancyBox。

<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();
  }); 

});

我希望你觉得它很有用

相关问题
最新问题