使用 Javascript 和 CSS 预加载图像答案

【问题标题】：Preload image with Javascript and CSS使用 Javascript 和 CSS 预加载图像
【发布时间】：2015-11-24 21:11:39
【问题描述】：

我对 javascript 嵌入式应用程序中的图像有一个大问题。我想制作一个预加载图像，但我不知道浏览器是如何工作的。

看这个简单的例子：code

var colors = [
    "http://www.robolaranja.com.br/wp-content/uploads/2014/10/Primeira-imagem-do-filme-de-Angry-Birds-%C3%A9-revelada-2.jpg",
    "http://imguol.com/c/noticias/2013/12/13/13dez2013---esta-imagem-mostra-a-nebulosa-de-caranguejo-um-iconico-remanescente-de-supernova-na-nossa-galaxia-vista-do-observatorio-espacial-herschel-e-do-telescopio-hubble-uma-nuvem-de-gas-e-poeira-1386961235961_956x500.jpg",
    "http://wallpaper.ultradownloads.com.br/121350_Papel-de-Parede-Imagem-Abstrata_1920x1200.jpg"
]

var currentDiv = "div2";
var count = 0;
var lenght = colors.length;
var timeForNextImage = 0;
var preloadOk = false;

setInterval(function() {

    count ++;
    if (count > lenght) count = 0;

   var date = new Date();
   var time = date.getTime();

    if  (time > (timeForNextImage - 3000) && preloadOk == false) {
        preLoad();
    } else if (time > timeForNextImage) {
        play();   
    }



}, 300);

var play = function() {

    if (currentDiv == "div2") {
        $('#'+currentDiv).css("visibility", "visible");
    } else {
        $('#div2').css("visibility", "hidden");
    }
    var date = new Date();
    timeForNextImage =  date.getTime() + 10000;
    preloadOk = false;

    $("#lbl").text("div atual: "+currentDiv);
 };

var preLoad = function() {  

      if (currentDiv == "div1") {
        currentDiv = "div2";      
    } else {
        currentDiv = "div1";
    }

     $("#" + currentDiv).css("background-image", 'url('+colors[count]+')');
    preloadOk = true;
};

你怎么看，理论上我做了一个预加载。但是，当我把它放在舞台上时，浏览器只处理我的图像？

如果我更改 z-index 属性，它会再次呈现吗？

【问题讨论】：

您是否要实现图像每 3 秒旋转一次？
css("visibility", "hidden") => 新浏览器延迟加载css隐藏元素；因此，如果您不使用 JS，则带有隐式 height: 0px; 的背景图像的 div 通常会更好

标签： javascript html css

【解决方案1】：

您返回preloadOK = true，但图片未加载。那不是预加载器。

要制作预加载器，您可以使用new Image() 对象或load() 事件。

var images = new Array()
function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i]
  }
}
preload(
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
)

【讨论】：

好的，但是，浏览器是如何工作的？是在舞台上处理图像吗？
我将尝试使用 javascript 加载这个策略，谢谢！
当您放置背景图片时，url 会更新，但您在下一行返回 true。要将异步加载器控制为 ajax 或图像，您需要延迟等待加载一些异步资源。否则，使用这些方法，您可以在没有延迟的情况下实现相同的目标。但是，如果您对延迟的内容及其工作方式感兴趣，请查看：api.jquery.com/category/deferred-object

【解决方案2】：

预加载图像的一种简单方法是创建一个图像标签并将 url 设置为 src。您不必将其附加到 DOM 即可发出请求。

var preLoad = function() {  
    var img = new Image();
    img.src = colors[count];
};

【讨论】：

它只适用于外部图像还是本地图像？
嗯，我如何在后台使用这个“img”，？例如： $('').attr('src', img).load(function() { $('#bkpId').css('background-image', ???); } );
一旦你使用上面的方法预加载了一张图片，浏览器会缓存它，所以当你需要展示图片时，你只需将它的 URL 设置为可见图片标签的 src，浏览器就会加载缓存中的图像，而无需实际发出新请求。
嗯，我现在明白了。谢谢