Question

我正在尝试使用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();
});

Answer 1

如果您的图像被命名为＃.jpg将预加载功能转换为适配器，它接收图像数量并迭代预加载字符串，如'bgImage /'+ i +'.jpg'。

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

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

此单行应替换所有索引，每次滚动时，您都会将正确的图像放入背景中。

至于在javascript / jQuery事件上更改css，我建议使用jQuery动画，并快速转换几个ms，但是转换过程。

jQuery .scroll像电影一样改变背景

1 个答案: