Question

我很难在java脚本中了解图像预加载器的工作原理。因此，如果有人能够解释他们如何使用一个可以帮助很多的例子。 没有jquery

Answer 1

加载单张图片

浏览器将异步加载图像...这意味着当浏览器被赋予.src图像时，它将开始在后台加载该图像，但也会在{{{}后继续处理javascript代码。 1}}

.src

即使在图像完全装入并准备使用之前，警报也会显示。

那么你怎么知道图像何时完全加载并准备好使用？

答案：您可以告诉浏览器“回电话”＃34;当它完成加载图像。你得到回复＆＃34;通过添加＆＃34; img.onload＆＃34;对图像对象起作用。每当浏览器完成加载图像时，浏览器将触发＆＃34; img.onload＆＃34;功能

// create a new image object
var img=new Image();

// set the image object's image source
img.src='myImage.png';

// do some stuff while the image is loading in the background
alert('Your image has started loading, but is not yet complete');

完整的图像加载过程将按以下顺序进行：

img.onload = theImageHasFinishedLoading;

function theImageHasFinishedLoad(){
    alert('Your image has finished loading...you can use it now');
}

预加载多张图片

预加载多张图片：

创建一个数组来保存所有图片网址，并将图片网址添加到此数组中。

// happens 1st
var img=new Image();

// happens 2nd: this callback is ASSIGNED, but NOT TRIGGERED yet
//     until the image has fully loaded
img.onload = theImageHasFinishedLoading;

// happens 3rd
img.src='myImage.png';

// happens 4th
alert('Your image has started loading, but is not yet complete');

// happens 5th after the browser has fully loaded the image
//     (The browser will call this function automatically because .onload was set)
function theImageHasFinishedLoad(){
    alert('Your image has finished loading...you can use it now');
}

创建一个数组来保存所有图像对象（==您的实际图像）。
```
// For example
var imageURLs=[];
imageURLs[0]='myImage.png';
```
将// For example var imgs=[];个元素添加到图像对象数组中（为URL数组中的每个URL添加一个new Image）。
```
new Image
```
将每个图片对象的//For example imgs[0] = new Image();回调设置为相同的功能。
```
.onload
```
使用图片网址数组将每张图片的// For example imgs[0].onload = theImageHasFinishedLoading;设置为个人网址。
```
.src
```
在// For example imgs[0].src = imageURLs[0];回调中，每次成功加载新图片时都会递增计数器。
```
theImageHasFinishedLoading
```

当计数器达到与图像URL数组相同的长度时，您将知道所有图像都已完全加载。

// For example
var counter=0;

function theImageHasFinishedLoading(){
    counter++;
}

以下是完整的示例代码和演示：

＆＃13;

    function theImageHasFinishedLoading(){
        counter++;
        if(counter>=imageURLs.length){
            alert('All the images have successfully preloaded. Go use them now!');
        }
    }

＆＃13;

window.onload=(function(){


  // canvas related variables
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;

  // put the paths to your images in imageURLs[]
  var imageURLs=[];  
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

  // the loaded images will be placed in imgs[]
  var imgs=[];
  var imagesOK=0;
  startLoadingAllImages(imagesAreNowLoaded);

  // Create a new Image() for each item in imageURLs[]
  // When all images are loaded, run the callback (==imagesAreNowLoaded)
  function startLoadingAllImages(callback){

    // iterate through the imageURLs array and create new images for each
    for (var i=0; i<imageURLs.length; i++) {
      // create a new image an push it into the imgs[] array
      var img = new Image();
      // Important! By pushing (saving) this img into imgs[],
      //     we make sure the img variable is free to
      //     take on the next value in the loop.
      imgs.push(img);
      // when this image loads, call this img.onload
      img.onload = function(){ 
        // this img loaded, increment the image counter
        imagesOK++; 
        // if we've loaded all images, call the callback
        if (imagesOK>=imageURLs.length ) {
          callback();
        }
      };
      // notify if there's an error
      img.onerror=function(){alert("image load failed");} 
      // set img properties
      img.src = imageURLs[i];
    }      
  }

  // All the images are now loaded
  // Do drawImage & fillText
  function imagesAreNowLoaded(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    ctx.font="30px sans-serif";
    ctx.fillStyle="#333333";

    // drawImage the first image (face1.png) from imgs[0]
    // and fillText its label below the image
    ctx.drawImage(imgs[0],0,10);
    ctx.fillText("face1.png", 0, 135);

    // drawImage the first image (face2.png) from imgs[1]
    // and fillText its label below the image
    ctx.drawImage(imgs[1],200,10);
    ctx.fillText("face2.png", 210, 135);

  }



}); // end window.onload

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

图像预加载器如何工作？

1 个答案: