我有一个问题，我的照片库仅在页面刷新时加载。我相信修复很简单，除了我没有运气。我想我需要在 .append() 函数加载后调用一个函数。
照片库相当复杂。它有 4 个组件：
- 使用 div 附加来自三个不同 xml 文件的图像。
- 图像 div 由 css 提供，并从马赛克 jquery 插件中覆盖。
- 图像由同位素 jquery 插件分组排列，以显示和隐藏某些照片。
- 单击时图像使用fancybox jquery 插件。
首先，我将从三个不同的 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 功能：
- 主要 JS： http: //moanabeach.businesscatalyst.com/js/main.js
马赛克功能
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();
}
这些参考函数中的每一个来自：
- http://moanabeach.businesscatalyst.com/js/mosaic.1.0.1.min.js
- http://moanabeach.businesscatalyst.com/js/jquery.isotope.js
- http://moanabeach.businesscatalyst.com/js/fancybox/jquery.fancybox.js?v=2.1.4
可以在此处查看实时图库，该图库仅在首次加载和页面刷新时正确加载：
单击网站上的其他链接或使用浏览器中的后退按钮后，它不会加载。
似乎正在发生的事情是 #thumb-gallery 高度在图像之前加载，因此高度太小并且不显示图像。如果您单击左侧菜单，则会刷新高度并且图库可以正常工作。改变的两个值是#thumb-image 高度：
**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)，将它们垂直间隔开。
我认为这一切都归结为要在附加函数末尾调用的镶嵌、同位素或花式框函数之一（如果不是所有函数。）。这样，图像将在其他任何事情发生之前加载并附加。但是，我不知道该怎么做。
如果您需要更多信息，我会及时回复。
实时页面：moanabeach.businesscatalyst.com/gallery
先感谢您。
请注意：我没有创建任何 jquery 文件（main、isotope、mosaic 和 fancybox），所以我不知道 main.js 和其他文件之间的连接。他们带着模板来了。我修改的唯一代码是附加代码。
尝试：
- 玩转 document.ready 和 window.load 以及各种功能。
- javascript代码和文件的位置