无限卷轴,同位素,图像加载(重叠图像)

时间:2016-02-18 12:10:11

标签: jquery jquery-isotope infinite-scroll srcset imagesloaded

我在iOS 9(iPhone)上遇到了同位素,无限滚动和imagedLoaded的奇怪问题。这非常适合所有其他浏览器除了移动游猎。在第二组或第三组帖子加载之后,几乎就好像imagesLoaded()停止工作并且一些帖子开始重叠。

Here's a link to the site

我花了好几个小时试图找出我做错了什么。

谢谢

jQuery(document).ready(function($) {

var $container = $('.container');

$('.container').imagesLoaded( function() {

$container.isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    stamp: '.stamp',
    masonry: {
        gutter: '.gutter-sizer'
    }
});

$container.infinitescroll({
    "nextSelector":".nav-links .nav-previous a",
    "navSelector":".paging-navigation",
    "itemSelector":".item:not(.stamp, .main-filter-navigation, .intro-about, .intro-written, .intro-brought, .intro-interpreted)",
    "bufferPx": "800",
    loading: {
        finishedMsg: 'No more items to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
    }
},

function ( newElements ) {
var $newElems = jQuery( newElements ).css({ opacity: 0 }); // hide to begin with
// ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn().delay(40); // fade in when ready
    $container.isotope( 'appended', $newElems, true );
     });
    }
);

});
});

更新:我认为我已将此问题跟踪为imageLoaded和WordPress 4.4中引入的新srcset响应式图像的问题

如果我使用functions.php文件中的过滤器禁用响应式图像支持,该过滤器从图像中删除了srcset属性,那么在移动版Safari中一切都会正常加载。

有没有更好的方法来解决这个问题?

0 个答案:

没有答案