掌握预加载图像

我有一些问题，使用JS预加载图像。我有一个小提琴，我试图创建三个图像对象并逐个加载，但是我只能得到一个图像？任何帮助赞赏。掌握预加载图像

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

     var images = new Array(); 

    images[0] = 'http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg'; 
    images[1] = 'http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg'; 
    images[2] = 'http://wallfc.com/wp-content/uploads/2014/09/Little-Birds.jpg'; 
    var i = 0;  

    while(i < images.length){ 

    var image = new Image(50,50); 
    image.src = images[i]; 
    image.onload = function(){ 

         $('body').append(image); 
         i++; 
           } 
    i++ 
    } 



    }); 

</script> 
</head> 

<body> 

</body>

来源

2014-10-04 user3760639

Fiddle Demo

imageLoader(0); //call the function with first image to load `0` as index starts from `0` 
function imageLoader(i) { //function to load images one by one and pass the array index 
    var image = new Image(50, 50); //create a new image 
    image.src = images[i]; //set src of the image from images array 
    image.onload = function() { //on image load 
     $('body').append(image); //append to the the body 
     if (++i >= images.length) return; //increment i check the length of images is exceeded than return 
     imageLoader(i); //more images are present in array then call the function again 
    } 
}

来源

2014-10-04 16:01:33

掌握预加载图像

回答

相关问题