好的，所以对于一个基于图形的网站，我必须想出一种方法让用户不要一个接一个地观看每个图像加载。所以我开发了以下代码作为一种预加载器，直到页面上的所有图像都准备好。我知道通常我们不应该延迟查看图像的页面内容，但是图像是页面上唯一的内容，所以我选择了虚假预加载这种较小的邪恶。
代码的工作方式如下：它在 ul 页面中查找所有图像，将它们保存在 var (images) 中，并在作用域中的图像加载后淡入其父 li。它还检查何时从缓存中提取图像。这会创建一个很好的空 li 的淡入，这些空 li 被样式化为空框，直到图像本身被加载并触发页面的其余功能。
现在的问题是：ie9 和 ie10 只完成了一半，然后随机停止，因此页面永远不会完成“加载”并且网站无法正常运行。我已经尝试了一些东西，但我不确定问题是什么。html和js如下。
图片 html （仅显示 80 个 li 中的两个：
<ul>
<li class="ch-one link">
<img class="gif" src="_images/_gifs/_inthemess/inthemess_1.gif" />
<img src="_images/_spreads/_thumbs/spread-04.jpg" />
</li>
<li class="ch-one link">
<img class="gif" src="_images/_gifs/_inthemess/inthemess_2.gif" />
<img src="_images/_spreads/_thumbs/spread-05.jpg" />
</li>
</ul>
gif在鼠标悬停时显示，jpg是固态。
var images = $('.spreads').find('img');
var loadedLen;
var liLen;
var x = 0, i = 0;
images.each(function () {
if ($(this).complete) {
$(this).parent().animate({
'opacity': '1'
}, 1000);
$(this).parent().addClass('loaded');
checkPageState();
} else {
$(this).load(function () {
$(this).parent().animate({
'opacity': '1'
}, 1000);
$(this).parent().addClass('loaded');
checkPageState();
});
};
function checkPageState() {
//check if all images are loaded
//if they are animate TOC in
loadedLen = $('.spreads li.loaded').length;
liLen = $('.spreads li').length;
if (loadedLen === liLen) {
showPages();
console.log('@showPages call from checkPageState');
} else if (loadedLen === 10) {
//fix li height issue
var imgHeight = $(images[4]).height() + 2;
};
};
});
function showPages() {
var ph = $(document).height();
//then we call the function that will loop
//and fade in each image until it reaches the last one
pageTime = setTimeout(function () {
clearTimeout(pageTime);
fadeInEachPage();
}, 100);
function fadeInEachPage() {
if (i < images.length) {
clearTimeout(pageTime);
//start the countdown first
pageTime = setTimeout(function () {
i++;
fadeInEachPage();
}, 1);
theImage = images[i];
$(theImage).not('.gif').animate({ 'opacity': '1' }, 800);
} else if (i === images.length) {
//trash collection
//fadeInEachPage is called so frequently the program
//will pass else if (i === images.length) a few times
//thus causing the text to pulse in correctly
if( x === 0 )
{
//adds listener for mouse over effect
addGifListener();
$('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
var inTime = setTimeout(function () {
clearTimeout(inTime);
$('#overview header h1.title').html('Thank you for purchasing the 6 Memos eBook. Simply select a chapter to enjoy full size.');
$('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
}, 2000);
var finalTitleTime = setTimeout(function() {
clearTimeout(finalTitleTime);
$('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
}, 8000);
var finalFadeIn = setTimeout( function() {
$('#overview header h1.title').html('6 Memos');
$('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
clearTimeout(finalFadeIn);
}, 9000);
//trash collection
x++;
} else {
return;
};
};
};
};
谢谢您的帮助！