【发布时间】：2013-04-17 09:07:50
【问题描述】：
我为我当前的代码创建了一个 jsfiddle。 http://jsfiddle.net/gL5sB/38/
我正在尝试更改滚动事件的正文背景 css。当背景发生变化时，当 css 更新并加载新图像时，它会闪烁。有时它看起来很顺利，然后似乎变得更糟。很奇怪。好奇是否有人知道如何优化？
我正在预加载图像。不知道为什么闪烁。有什么想法吗？
$(document).ready(function () {
switchImage();
});
$(window).scroll(function () {
switchImage();
});
var pics = []; // CREATE PICS ARRAY
//PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
//alert("preload " + arguments[i]);
}
}
preload(
'bgImage/100.jpg',
'bgImage/101.jpg',
'bgImage/102.jpg',
'bgImage/103.jpg',
'bgImage/104.jpg',
'bgImage/105.jpg',
'bgImage/106.jpg',
'bgImage/107.jpg',
'bgImage/108.jpg',
'bgImage/109.jpg',
'bgImage/110.jpg',
'bgImage/111.jpg',
'bgImage/112.jpg',
'bgImage/113.jpg'
);
function switchImage() {
var s = $(window).scrollTop()/10;
var index = Math.floor(s / 5);
$('body').css('background-image', 'url(' + pics[index].src + ')');
}
【问题讨论】：
-
Shawn，我在 chrome (windows) 上看起来很流畅。你在哪里看到闪烁？作为与您的问题不同的问题，这些图像本身几乎是 1MG，这对于获取 bg 图像来说是相当大的页面加载。
-
我同意，但图像已从原始尺寸优化。那么，您是否建议进一步减小图像尺寸？实际上有 200 张图像正在运行以提供电影效果。很高兴阅读它正在您的机器上运行。当您缓慢滚动时，它仍然响应良好吗？我会看看我们是否可以进一步缩小图像。
-
好吧，不管你做什么，它们仍然会很大。我建议你为一个很酷的效果付出了相当高的代价，所以你可能想考虑不使用它。不过，暂时忽略这一点，我在 IE 中尝试了你的小提琴，并且能够看到闪烁的效果。我仍在寻找解决方案。
-
这似乎是在图像尚未完成预加载时发生的，而在我这种缓慢的 DSL 连接上，加载完成最多需要 10 秒。您无法采取任何措施来防止这种情况发生，因为您无法控制用户的互联网连接速度。一个建议是：使用
onload单独跟踪每个图像何时完成预加载。然后仅执行switchImage代码，索引为已完成预加载的图像。 -
我理解 Jonah，但唯一的问题是我必须使用这个效果和代码。我的另一个解决方案是使用 HTML5 视频背景并弄清楚如何正向和反向播放，但这似乎是一个更好的解决方案。
标签： javascript jquery css preload