Question

我在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属性，它会再次呈现？

Answer 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"
)

3 Ways to Preload Images with CSS, JavaScript, or Ajax

Answer 2

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

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

使用Javascript和CSS预加载图像

2 个答案: