javascript：一次预先加载一个图像

我目前有一个旋转背景，用于在加载页面时预加载图像。但是，如果可能的话，我想一次预先加载一张图像。javascript：一次预先加载一个图像

我的代码：

function preload(arrayOfImages) { 
     $(arrayOfImages).each(function(){ 


      $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
     }); 
    } 
    $(document).ready(function() { 

    var b = [<? $img = getContents(ROOT."/img/backgrounds/"); 
      foreach($img as $i) 
      { echo "\"" . $i . "\""; 
       if($i != end($img)) echo ","; 
      } 
     ?>]; 
    preload(b); 

    var r=Math.floor(Math.random()*b.length) 
    $('#bg1').css("background-image", "url('/img/backgrounds/"+b[r]+"')"); 

    var alt = false; 
    var delay = 50000; 
    var speed = ((delay/3)*2); 
    var opacity = 1; 

    setInterval(function() { 
     var r=Math.floor(Math.random()*b.length); 

     //put the individual preload code here 

     switch(alt) 
     { case true: 
       $('#bg1').css("background-image", "url('/img/backgrounds/"+b[r]+"')"); 
       $('#bg1').fadeTo(speed,opacity); 
       $('#bg2').fadeOut(speed); 
      break; 
      case false: 
       $('#bg2').css("background-image", "url('/img/backgrounds/"+b[r]+"')"); 
       $('#bg2').fadeTo(speed,opacity); 
       $('#bg1').fadeOut(speed); 
      break; 
     } 
     alt = !alt; 
     }, delay); 

    });

上面的代码工作正常。如果有更好的方法，请让我知道！但除此之外，我怎样才能一次预先加载一张图片？

来源

2013-01-25 Chud37

为什么？有点击败了预加载的目的。 – JJJ

@Juhana如果它是一个旋转的幻灯片，第一个图像将显示一段时间，然后切换到下一个。下一张图像应在切换前预加载，但如果所有即将到来的图像同时预加载，则可能会影响初始加载。顺序加载顺序图像允许初始图像加载得更快，然后在幻灯片放映中的下一张图像开始之前，将其余部分隐藏在背景中。 –

function preload(arrayOfImages, index) { 
    index = index || 0; 

    if (arrayOfImages && arrayOfImages.length > index) { 
     var img = new Image(); 
     img.onload = function() { 
      console.log(arrayOfImages[index] + " loaded successfully"); 
      preload(arrayOfImages, index + 1); 
     }; 
     img.src = arrayOfImages[index]; 
    } 
}

fiddle

来源

2013-01-25 13:24:19 Andreas

javascript：一次预先加载一个图像

回答

相关问题