Javascript jQuery照片库仅在刷新时加载

我有一个问题，我的照片库只在页面刷新时加载。我相信解决办法很简单，只是我运气不好。。我想我需要在加载.append（）函数后调用一个函数

照片库相当复杂。它有4个组成部分：

使用div附加来自三个不同xml文件的图像

图像div由css和mosaic jquery插件提供的覆盖

图像通过jquery插件分组排列，以显示和隐藏某些照片

单击图像时使用fancybox jquery插件 首先，我将从三个不同的xml提要加载的图像附加到一个页面上。这段代码运行良好，即使图像没有显示在页面上，也会追加图像（使用inspect检查它们的div和大小是否存在）

附加代码 同位素功能 Fancybox函数 这些参考函数中的每一个都来自：

只能在首次加载和页面刷新时正确加载Live Gallery:

单击网站上的其他链接或使用浏览器中的“后退”按钮后，不会加载该文件。

似乎是在图像之前加载了#thumb gallery高度，因此高度太小，无法显示图像。如果单击左侧菜单，高度将刷新，画廊将正常工作。更改的两个值是#拇指图像高度：

**PAGE LOAD:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 98px;">


**PAGE REFRESH:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 1359px;">

**页面加载：**
**页面刷新：**

注意：高度取决于浏览器窗口

另外，同位素项目-webkit转换：translate3d（0px，0px，0px）；在每个图像上，除非页面刷新，否则无法正确加载组。在正常页面加载时，所有图像组都放置在彼此的顶部，在页面刷新时，它们有一个-webkit transform:translate3d（0px 123px 0px），垂直隔开

我假设这一切都归结为在append函数末尾调用的马赛克、同位素或fancybox函数之一（如果不是所有函数的话）。这样，图像将在其他任何事情发生之前加载并追加。然而，我不知道如何做到这一点

如果您需要更多信息，我会及时回复

实时页面：moanabeach.businesscatalyst.com/gallery

先谢谢你

请注意：我没有创建任何jquery文件（main、同位素、mosaic和fancybox），因此我不知道main.js和其他文件之间的连接。他们带来了模板。我唯一修改的代码是append代码

尝试：

• 玩document.ready和window.load以及各种功能
• javascript代码和文件的位置

---

你修好了吗？除非我遗漏了什么（浏览器/操作系统），否则对我来说效果很好？我使用的是Macintosh 10.8.5/Google Chrome，Safari也有同样的问题。Windows Phone 8/IE上存在同样的问题。您是否在“多媒体资料”页面上？还是主页？我修复了第一个主页。您正在使用什么操作系统和浏览器，以便我检查。它在第一页加载时正常工作，但如果您单击内部页面链接，然后返回或再次单击菜单上的“图库”，则不会加载。。。也许你的缓存正确。另外，我刚刚检查了Windows7/IE，甚至在第一页加载时也遇到了同样的问题。

mosaic : function(){
                    $('.fade').mosaic();
                }, // mosaic

isotype: function() {

                    $(window).load(function(){
                            if($('#thumb-gallery').size() === 0){return;}

            var $container = $('#thumb-gallery');
            $container.isotope({
                masonry: {
                    columnWidth: 1 //was 26
                },
                sortBy: 'number',
                getSortData: {
                    number: function($elem) {
                        var number = $elem.hasClass('element') ? $elem.find('.number').text() : $elem.attr('data-number');
                        return parseInt(number, 10);
                    },
                    alphabetical: function($elem) {
                        var name = $elem.find('.name'),
                            itemText = name.length ? name : $elem;
                        return itemText.text();
                    }
                }
            });
            var $optionSets = $('.meta.option-set'),
                $optionLinks = $optionSets.find('a');

                    $optionLinks.click(function() {
                        var $this = $(this);
                        // don't proceed if already selected
                        if ($this.hasClass('selected')) {
                            return false;
                        }
                        var $optionSet = $this.parents('.option-set');
                        $optionSet.find('.selected').removeClass('selected');
                        $this.addClass('selected');
                        // make option object dynamically, i.e. { filter: '.my-filter-class' }
                        var options = {},
                            key = $optionSet.attr('data-option-key'),
                            value = $this.attr('data-option-value');
                        // parse 'false' as false boolean
                        value = value === 'false' ? false : value;
                        options[key] = value;
                        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
                            // changes in layout modes need extra logic
                            changeLayoutMode($this, options)
                        } else {
                            // otherwise, apply new options
                            $container.isotope(options);
                        }
                        return false;
                    });

                    }); // window.load()


        } // isotope()

fancyBox : function(){
$('.fancybox').fancybox();
                }

**PAGE LOAD:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 98px;">


**PAGE REFRESH:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 1359px;">