图片预加载和懒加载的实现方法

简介: 图片预加载,即图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。一、懒加载将图片src赋值为一张默认的图片,当用户滚动到可视区域的时候,再去加载真正的图片;代码实现:html代码js代码vue中实现懒加载对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。

图片预加载,即图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。

一、懒加载

将图片src赋值为一张默认的图片,当用户滚动到可视区域的时候,再去加载真正的图片;

代码实现:

img_db40d52888f56b570e26f06530ded3db.png
html代码
img_e57bb87b9f9b56a75e4bfe0e03eb809a.png
js代码

vue中实现懒加载

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

img_6e5b89985373f2be1f97159a32bd8b34.png


img_c8891c322ba642b30b5aff64b9f4eb8a.png


img_a5d438f356e9ca9b8d2819ea927c503e.png


img_202406b267105d4964716b93277d5704.png


img_755a4f8fbb9d743459c630b0caf18233.png

vue文件

img_a105fac6eb908325ae629e30752b1683.png

main.js

img_d05c57e4511f577b1000fefd9d14021a.png
相关文章
|
6月前
|
JavaScript
懒加载图片案例
懒加载图片案例
|
存储 前端开发 JavaScript
前端实现图片的懒加载
前端实现图片的懒加载
67 0
|
3月前
|
存储 JavaScript UED
图片懒加载
图片懒加载
|
3月前
|
JavaScript API
如何实现图片懒加载
如何实现图片懒加载
74 0
|
6月前
|
JavaScript 前端开发
如何实现网页的懒加载?图片懒加载的原理
如何实现网页的懒加载?图片懒加载的原理
48 0
|
11月前
|
存储
图片懒加载(二)
图片懒加载(二)
48 1
|
JavaScript 前端开发 CDN
图片预加载
图片预加载
95 0
|
JavaScript 前端开发 UED
实现图片懒加载(及优化相关)
工作之余想要休闲一下(看-美-女-图),但是又觉得单纯休闲不利于自身进步,于是 ……
实现图片懒加载(及优化相关)
懒加载只能对图片进行懒加载吗?
懒加载只能对图片进行懒加载吗?