js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

JS实现图片预加载的过程中，需要使用Image对象，并结合其属性和事件来完成操作。下面是实现图片预加载的完整攻略：

1. 创建Image对象

首先需要创建Image对象，可以使用 new Image() 语法完成：

let img = new Image();

1. 监听onload事件

之后，需要监听Image对象的onload事件，来判断图片是否加载完成：

img.onload = function() {
  console.log('图片加载完成');
}

1. 加载图片

在Image对象上，指定src属性来加载图片：

img.src = 'https://example.com/image.jpg';

1. 检测图片加载状态

可以使用Image对象的complete属性来检测图片加载状态：

if (img.complete) {
  console.log('图片已加载完成');
} else {
  console.log('图片还没加载完成');
}

通过这样的方式，我们可以在图片加载完成之前，预先将其加载完成，从而提升页面加载速度。

示例1：

以下示例展示了如何预加载图片，用于实现图片轮播的功能：

<img src="loading.gif" id="preload">

<script>
let img = new Image();
img.src = 'image-1.jpg';

let preload = document.getElementById('preload');

img.onload = function() {
  preload.style.display = 'none';
  document.getElementById('slider').style.backgroundImage = 'url(' + img.src + ')';
}
</script>

在HTML代码中，我们先放一张占位图片（loading.gif），用于在图片加载之前展示，等到图片加载完成之后再隐藏。JavaScript代码中，我们创建了一个Image对象，指定图片URL（image-1.jpg），并监听onload事件，在图片加载完成之后，将占位图片隐藏，并将图片URL作为背景图片显示在页面上。

示例2：

以下示例展示了如何预加载多张图片，并实现一个进度条：

<div id="progress"></div>

<script>
let urls = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg'];
let progress = document.getElementById('progress');
let loaded = 0;

for (let i = 0; i < urls.length; i++) {
  let img = new Image();
  img.src = urls[i];

  img.onload = function() {
    loaded++;
    let percent = Math.floor((loaded / urls.length) * 100);
    progress.style.width = percent + '%';

    if (loaded == urls.length) {
      console.log('所有图片已经加载完成');
    }
  };
}
</script>

在HTML代码中，我们创建了一个进度条，用于显示图片加载进度。JavaScript代码中，我们使用一个循环，遍历图片URL列表，为每个URL创建一个Image对象，并指定onload事件。在每次图片加载完成时，计算已加载图片数量和总图片数量的百分比，并根据百分比值调整进度条的宽度。最后，当所有图片都已加载完成时，在控制台输出提示信息。