13

我在这里使用 jQuery isotope 整理了一些东西.. http://jsbin.com/eziqeq/6/edit

它似乎通常可以工作，但是在第一次加载新选项卡时，Isotope 插件将包装元素的高度设置为 0。如果我刷新页面，它确实可以工作并根据里面发现的物品。

任何帮助将不胜感激。我想不出为什么在第一次加载时它不起作用，而在随后的重新加载时它是..除非它可能与缓存它加载的图像有关？

编辑 -

这是 Webkit 浏览器中的缓存问题，因为它在 Firefox 和工作选项卡上工作，当我清除缓存并刷新页面时，它在再次刷新之前无法工作。

4

7 回答 7

15

您可以使用mkoryak.

或者您可以使用以下内容：（不需要插件 -仅限 jQuery）：

// jQuery - Wait until images (and other resources) are loaded
$(window).load(function(){
    // All images, css style sheets and external resources are loaded!
    alert('All resources have loaded');
});

使用上述方法，您还可以确保所有CSS样式表都已加载（以确保您的页面在启动时正确显示isotope）。

“ DOM ready ”在 DOM 准备好（即标记）时触发。

$(document).ready( function(){ ... });

“窗口加载”等待所有资源然后触发。

$(window).load( function(){ ... });

注意：（@DACrosby）：如果图像被缓存（即，它们目前没有从站点加载 - 您正在使用本地副本），则 load() 不会总是触发。

于 2013-01-04T19:15:27.900 回答
6

还有另一种选择来解决这个问题。grid-item如果您包含任何.js，则必须使用另一个 js image。下面的js链接是

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>

然后在下面调用这个占位符js：

/*=============Code for Masonry Gallery ==============*/
    var grid = document.querySelector('.grid');
    var jQuerygrid = jQuery('.grid').isotope({
        itemSelector: '.element-item'
    }); 
    var iso = jQuerygrid.data('isotope');
    jQuerygrid.isotope( 'reveal', iso.items );

    imagesLoaded(grid, function(){
        iso.layout();
    });

您可以从 isotop 的官方网站获得完整而清晰的详细信息。关联

于 2015-09-12T07:22:28.357 回答
5

注意：
1.windwo加载事件中调用iso-top函数（等待资源加载）也可以在footer中调用函数。

2.确认css加载后的函数调用。

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });

也可以使用图像预加载器插件首先加载图像
http://www.createjs.com/#!/PreloadJS

于 2014-05-31T09:56:31.677 回答
2

您需要在 chrome 中使用imagesLoaded插件。等到所有图像都加载完毕后再初始化同位素

于 2013-01-04T18:53:51.643 回答
1

解决此问题的更好方法是为同位素项目和/或图像本身提供宽度和高度。使用 widnow 加载方法，您最终会在同位素启动之前等待几秒钟，并且布局会发生变化，这很奇怪。

这是我在帖子循环内的 WordPress 主题中使用的内容：

<?php
//....
if ( get_post_gallery() ) {

        $gallery        = get_post_gallery( get_the_ID(), false );
        $galleryIDS     = $gallery['ids'];
        $pieces         = explode(",", $galleryIDS);

        foreach ($pieces as $key => $value ) {
            $image_medium   = wp_get_attachment_image_src( $value, 'medium');
            $image_full     = wp_get_attachment_image_src( $value, 'full'); 

            $w = $image_medium[1]; //Image Width
            $h = $image_medium[2]; //Image Height

?>

        <div class="iso-item" style="width:<?php echo $w; ?>px; height:<?php echo $h; ?>px">
                <a href="<?php echo $image_full ?>"   rel="lightbox">
                    <img width="<?php echo $w; ?>" height="<?php echo $h; ?>" src="<?php echo $image_medium ?>"/>
                </a>
        </div>
<?php 
        }
}
?>
于 2019-08-20T21:32:03.790 回答
0

快速纯 JavaScript 示例，用于在初始化同位素库之前检查所有图像是否已加载。

jQuery(document).ready(function($){
    var imgs = document.images,
        len = imgs.length,
        counter = 0;

    [].forEach.call( imgs, function( img ) {
        if(img.complete)
          incrementCounter();
        else
          img.addEventListener( 'load', incrementCounter, false );
    } );

    function incrementCounter() {
        counter++;
        if ( counter === len ) {
            // All images loaded, go ahead.
            var $grid = $('.grid').isotope();
        }
    }
});

于 2020-03-10T09:30:14.973 回答
0 
$('window').imagesLoaded(function () {
    // filter items on button click
    $('.portfolio-btn-group').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({filter: filterValue});
    });

    // init Isotope
    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        percentPosition: true,
        masonry: {
            // use element for option
            columnWidth: '.grid-item'
        }
    })
});
于 2018-03-24T10:38:48.627 回答