Question

我以前用javascript编写代码--jquery和PHP。我喜欢有一个文件夹，让100个图像，扫描它，然后用淡入淡出的屏幕显示它，并延迟... 其中大部分都可以很好地完成

问题：出于速度目的，我想获得img1，展示它预载img2 等2-3秒淡出img2 预载img3 等待 ......等等......

因此同时只有2个图像加载速度要快得多，并且不需要太多编码，只需切换下一个图像......

现在，拥有100张图片会让它加载缓慢，我不会谈论250！那只是杀了电脑任何想法

我认为ajax ad jquery tu动态地改变img引用和预加载....任何想法任何人????

Answer 1

在jquery中，你可以使淡入淡出动画成为image.load事件的回调

像这样（未经测试）

        images = [ "one.jpg", "two.jpg" ...];
        divs = ["#first", "#second"];
        fore = 0;

        function show() {
            if(!images.length) return;
            var back = 1 - fore;
            $(divs[back]).html("<img>").find("img").attr("src", images.shift()).load(function() {
                $(divs[fore]).fadeOut();
                $(divs[back]).fadeIn();
                fore = back;
                setTimeout(show, 1000);
            });
        }

Answer 2

在显示image1时，让浏览器通过为其创建图像标记或使用javascript图像对象来加载和缓存image2。

当您准备切换图像时，只需将主图像从image1更新为image2（它已经在浏览器缓存中，因此没有延迟）。此时，将隐藏的图像更新为image3并等待它完全加载。

Generale图像预加载问题

2 个答案: