js中Image对象以及对其预加载处理示例

JS中的Image对象用于创建图片实例，可以用于实现图片的预加载。图片预加载可以让网页在用户打开时更快地展示图片，在用户看到图片前就已经开始加载。

Image对象基本用法

var img = new Image();  // 创建Image对象
img.src = 'image.jpg';  // 设置图片源

在这个例子中，我们创建了一个Image对象，并将源设置为image.jpg。当Image对象的src属性被赋值后，图片就会开始加载。可以使用onload事件检测图片是否已经加载成功：

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  console.log('图片已加载完成');
};

在这个例子中，当图片加载完成后，onload事件会触发，并输出一条消息到控制台。

图片预加载示例

下面是一个使用Image对象进行图片预加载的示例：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var loaded = 0;

function preload() {
  for (var i = 0; i < images.length; i++) {
    var img = new Image();
    img.onload = function() {
      loaded++;
      if (loaded == images.length) {
        console.log('所有图片已加载完成');
      }
    };
    img.src = images[i];
  }
}

在这个例子中，我们定义了一个images数组，其中包含了需要预加载的图片。接着我们定义了一个变量loaded，用于统计已经加载完成的图片数。

然后我们定义了一个名为preload的函数。在这个函数中，我们使用for循环遍历images数组，并创建Image对象。对于每一个Image对象，我们设置它的src属性为对应的图片源，并为它设置一个onload事件处理函数。当图片加载完成后，onload事件处理函数会增加loaded的值，并检查已经加载的图片是否等于images数组的长度。如果已经加载的图片数量等于数组的长度，就意味着所有图片都已经加载完成了。

要使用这个预加载函数，只需要调用它即可：

preload();

在调用预加载函数后，它将开始加载所有的图片。当所有图片都加载完成后，控制台将输出一条消息。

除了上述的预加载示例，还可以使用Promise对象或者回调函数等方式实现图片的预加载。但是无论使用何种方式，Image对象都是实现图片预加载的重要对象。