在缓存中加载 Div 背景图像 [重复]

Posted 2023-05-07

【中文标题】在缓存中加载 Div 背景图像 [重复]

【英文标题】：load Div background images in cache [duplicate]

【发布时间】：2013-07-13 05:52:34

【问题描述】：

我正在研究 imageSlider，我已经拍摄了 div 并设置了 div 的背景图像。 on Page 加载背景页面需要大量时间来加载图像。有什么方法可以先在缓存中加载所有背景图像，一旦加载，我就可以显示主 Div ..

我正在读取 xml 文件，然后一一设置 div 的背景图像。

$('#myImageFlow').append('<div id="id'+k+'"  class="sliderImage"   style="visibility:hidden"> <div class="ffrontText" id="ff'+k+'">'+frontDiv[k]+'</div><div class="borderdiv" id="b'+k+'"></div><div class="borderdiv1" id="bd'+k+'"></div><div class="reflection" id="ref'+k+'"></div>  <div class="overlay" id="o'+k+'"></div></div>');

任何建议。

【问题讨论】：

只需一个标准的图像预加载器就可以为您完成这项工作。

@Archer 我没有使用 img .. 我想设置 div 背景图片

我知道，但是不管你如何使用它，它的缓存都是一样的，所以首先将它作为图像元素加载，然后显示页面。预加载就是预加载，不管:)

【参考方案1】：

你可以创建一个有两个参数（图像源数组和回调）的函数，并在所有图像加载完毕后调用回调函数。

例子：

preload_images = function(images, callback) 
    var images_count = images.length;
    var loaded_count = 0;
    $.each(images, function(index, src) 
        var image = $('<img src="' + src + '">');
        image.load(function() 
            loaded_count++;
            if (loaded_count == images_count && callback) 
                callback();
            
        );
    );


preload_images(['1.jpg', '2.jpg', '3.jpg'], function()  // pass background images in array
    console.log('background images preloaded');
    // Show main div
);