我有一个问题，我的照片库仅在页面刷新时加载。我相信修复很简单，除了我没有运气..我想我需要在加载.append（）函数后调用一个函数。
照片库非常复杂。它有4个组成部分：
首先，我将三个不同xml供稿中加载的图像附加到页面上。此代码工作正常，即使图像未显示在页面上，也会附加图像（使用检查它们的div和大小）。
$(document).ready(function(){
$.ajax({
type: "GET",
url:'/gallery/apartment/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser1
});
// don't touch anything under me
function xmlParser1(xml) {
$(xml).find("img").each(function () {
$(".apartment-images").append('<div class="mosaic-block third fade"><a href="/gallery/apartment/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/apartment/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
$.ajax({
type: "GET",
url:'/gallery/views/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser2
});
// don't touch anything under me
function xmlParser2(xml) {
$(xml).find("img").each(function () {
$(".the-views-images").append('<div class="mosaic-block third fade"><a href="/gallery/views/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/views/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
$.ajax({
type: "GET",
url:'/gallery/moana/PhotoGallery.xml', // Add your url to your photo gallery xml feed
dataType: 'xml',
success: xmlParser3
});
// don't touch anything under me
function xmlParser3(xml) {
$(xml).find("img").each(function () {
$(".moana-images").append('<div class="mosaic-block third fade"><a href="/gallery/moana/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/moana/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
});
// don't touch anything above me
}
});
然后main.js文件中有三段代码（我认为这些代码引用了js文件中的函数），这些代码为jQuery提供了图像功能：
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();
}
可在此处查看实时图库，该图片仅在首次加载和页面刷新时正确加载：
点击网站上的其他链接或使用浏览器中的后退按钮后无法加载。
似乎正在发生的事情是在图像之前加载了＃thumb-gallery高度，因此高度太小而且不显示图像。如果单击左侧菜单，则刷新高度并且图库正常工作。更改的两个值是＃thumb-image height：
**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;">
注意：高度取决于浏览器窗口。
此外，.isotope-item -webkit-transform：translate3d（0px，0px，0px）;除非在页面刷新，否则在每个图像组上都无法正确加载。在正常页面加载时，所有图像组都放在彼此的顶部，在页面刷新时，它们具有-webkit-transform：translate3d（0px 123px 0px），将它们垂直间隔开。
我认为这一切都归结为在追加函数结束时调用的镶嵌，同位素或fancybox函数之一（如果不是所有函数。）。这样，图像将在其他任何事情发生之前加载并附加。但是，我不知道该怎么做。
如果您需要更多信息，我会及时回复。
实时页面：moanabeach.businesscatalyst.com/gallery
提前谢谢你。
请注意：我没有创建任何jquery文件（主要，同位素，马赛克和fancybox），所以我不知道main.js和其他文件之间的连接。他们带来了模板。我修改的唯一代码是附加代码。