优化网页图片加载-优快云博客

分享背景: 有一个活动页，要呈现礼物列表，虽说使用了webp或者base64进行了优化，但是也抵不过页面初始化加载慢，页面成半拉半拉加载的糟糕体验，所以想使用 图片预加载 来优化优化。

图片预加载理解：

利用缓存,将图片提前加载并缓存到浏览器中或客户端中。

实现前提条件

要提前加载的图片是已知不变的，而且图片的真正url地址也是确定了的。

实现方法

纯css方法：

.preload-wrap {
    display: none;
}

<body>
    <div class="preload-wrap">
        <img src="https://xxx.xxx.tupian1.png" />
        <img src="https://xxx.xxx.tupian2.png" />
        <img src="https://xxx.xxx.tupian3.png" />
        <img src="https://xxx.xxx.tupian4.png" />
        <img src="https://xxx.xxx.tupian5.png" />
        <img src="https://xxx.xxx.tupian6.png" />
    </div>
    
    <div class="main">
        <!-- 真正的页面开始 -->
    </div>
</body>
复制代码

解释：元素display:none 是压根不需要在页面中展示，但是可以利用里面的 img标签先将页面所需图片进行加载并缓存到浏览器中，当真正页面元素加载图片的时候，就会直接从缓存中取了。

js方法（用在了Vue中）：

export default {
    data () {
        return {
            images: [], //和页面挂钩，vue监听的缓存images对象数组
        }
    },
    
    created () {
        this.preloadImg([
            "https://xxx.xxx.tupian1.png",
            "https://xxx.xxx.tupian2.png",
            "https://xxx.xxx.tupian3.png",
            "https://xxx.xxx.tupian4.png",
            "https://xxx.xxx.tupian5.png",
        ])
    },
    
    methods: {
        
        preloadImg (imgArr) {
            
            imgArr.map((val, index) => {
                
                this.images[index] = new Image()  //可以实现图片缓存到浏览器中
                this.images[index].src = val   // 将url赋值给创建的img
            })
        }
    }
}


复制代码