通过 js 获取页面上图片元素的加载状态
2017-10-01 本文已影响77人
ac68882199a1
我们在浏览网站的时候，会发现有的网站对于图片有一些特殊的交互效果，比如有的网站在图片加载时会显示一个加载的动画，加载完成后移除动画，而如果加载失败的话，就会出现对应的提示，并且可以点击重新加载
这种效果是如何实现的呢？其实通过 js 实现并不复杂，因为我们可以监听到页面上图片的加载状态。本篇文章只写实现的原理，并不会提供一个完整的 demo
Image 对象
在 js 中有一个 Image 对象，即图片对象，使用前需要先实例化
const image = new Image()
将这个image打印出来，我们会发现它就是一个<img>标签
console.log(image)
// <img>
于是我们就找到了页面上 img 标签与 js 代码中相对应的对象，通过Image对象我们可以实现很多功能
Image 对象上的普通属性
当我们创建了一个image实例后，此时的image是空的，它并没有自己的图片内容，如果想要为这个实例设置一张图片，就需要为它的src属性设置值
image.src = '...' // 想要添加的图片的路径
除了src属性，还有图片尺寸的相关属性，比如width height，但是在图片加载出来之前，这两个值都为 0
机智的小伙伴肯定都发现了，Image 上的属性与<img>标签上的属性是相同的，我们也可以使用alt属性等
Image 的事件属性
图片上的事件属性一般只用到三种：加载成功、加载错误、取消加载
// 加载成功
image.onload = () => {...}
// 加载错误
image.onerror = () => {...}
// 取消加载
image.onabort = () => {...}
在这三种事件属性中，我们可以分别定义自己想要被触发的脚本：
- 当图片加载完成时，控制台打印“加载完成”，同时移除图片元素上的加载动画
- 当图片加载出错或被取消时，控制台打印“加载失败”，同时在图片元素上提示加载失败，也可以为其添加点击事件，让这张图片重新加载
以上，就是我们所需要用的属性和事件，下面举例监听一张图片的加载状态
<body>
<script>
// 获取到页面上的 img
const image = document.getElementById('image')
image.onload = () => {
console.log('load success')
}
image.onerror = () => {
console.log('load error')
imageReload()
}
image.onabort = () => {
console.log('load abort')
imageReload()
}
function imageReload () {
image.addEventListener('click', (e) => {
// 重新定义 src 属性能够重新加载
image.src = image.src
})
}
</script>
</body>
上面的例子是针对页面上的一张图片的，但是通常页面上的图片会很多，可能也会存在很多相同的图片，这时候上面的代码肯定就不适合了，总不能一一添加id再获取，并且逐个添加点击事件吧？但是原理都是一样的，感兴趣的小伙伴们可以尝试编写一个自己的图片状态监听的小插件，实现一些自己的想要的交互，什么图片显示之前的占位图啊之类的都可以
扫码关注前端周记公众号
