0

我正在尝试使用 200 张图像更改网页的背景图像并像电影一样播放它们。我的代码正在运行,但是当图片在滚动时发生变化时,过渡会闪烁。似乎在滚动期间 CSS 更新并且我得到了闪烁。它在 Chrome 和 Safari 中非常明显,但在 FF 中也是如此。在 FF 中看起来更流畅。奇怪的。需要帮助解决问题。我正在使用下面的代码。拜托,任何有助于平滑过渡并使其更像电影的帮助都会很棒。我是 jquery 的新手,但有编程背景。非常感谢任何和所有建议!

我研究了将近三天。有人提到更新 .htaccess 文件有助于将文件的标题设置为不会过期,并且浏览器正在发送 304。我不知道如何测试,但下面是我的代码。

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]; 
    }
};
preload(
'bgImage/1.jpg'
,'bgImage/2.jpg'
,'bgImage/3.jpg'
,'bgImage/4.jpg'
,'bgImage/5.jpg'
); // THERE ARE 200 TOTAL IMAGES THAT WE ARE LOADING...

function switchImage() {
var s = $(window).scrollTop();
var index = 0;
if(s>   10  ){index =   1   ;}
if(s>   20  ){index =   2   ;}
if(s>   30  ){index =   3   ;}
if(s>   40  ){index =   4   ;}
if(s>   50  ){index =   5   ;}
// THERE IS 200 IF STATEMENTS IN TOTAL
// THE ODER OF THE IMAGES STARTS IN THE MIDDLE AND WE HAVE TO ADJUST DEPENDING ON POSITION
// USING THE IF STATEMENTS WAS THE EASIEST SOLUTION
$("body").css('background-image', 'url(' + pics[index].src + ')');
};

$(document).ready(function () {
switchImage();
//alert("images and dom loaded");
});

$(window).scroll(function () {
switchImage();
});
4

1 回答 1

1

如果您的图像被命名为#.jpg,则将预加载函数包装到适配器中,该适配器接收图像数量并迭代预加载字符串,如'bgImage/' + i + '.jpg'。

通过这种方式,您可以立即获得可重用的数组,以结合所有 200 个段的 switch 语句在滚动时使用,这在 A 中是真正的痛苦......或者只是调用:

index = $(window).scrollTop()/10;

这一行应该替换所有索引,并且每次滚动时都会将正确的图像放入背景中。

至于在 javascript/jQuery 事件上更改 css,我建议使用 jQuery animate 快速转换几毫秒,但仍然是一个转换。

于 2013-04-21T00:24:38.010 回答