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

简介: 图片预加载,即图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。一、懒加载将图片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
相关文章
|
传感器 存储
STM32--TIM定时器(3)
STM32--TIM定时器(3)
314 0
STM32--TIM定时器(3)
|
运维 Cloud Native 前端开发
如何解决 503 Service Temporarily Unavailable?
如何解决 503 Service Temporarily Unavailable?
1941 0
|
负载均衡 安全 Java
深入了解Spring Cloud Gateway:构建高效微服务网关
Spring Cloud Gateway是一个强大的微服务网关,它在现代分布式架构中扮演着至关重要的角色。本文将深入介绍Spring Cloud Gateway的核心概念、功能和用途,以帮助您更好地理解和利用这一工具来构建高效的微服务应用。
|
存储 人工智能 自然语言处理
轻松改造公众号:10分钟实现智能客服自动化!
在阿里云平台上,仅需10分钟即可将微信公众号(订阅号)升级为AI智能客服,提供7x24小时客户支持,显著提升用户体验。方案包括四步:创建大模型问答应用、搭建微信公众号连接流、引入AI智能客服以及增加私有知识库,确保客服能精准回答复杂咨询,助力业务竞争力提升。整个过程简单快捷,在免费试用额度内费用为零。
427 7
轻松改造公众号:10分钟实现智能客服自动化!
|
JavaScript
vite的快的原因居然如此简单!探秘其依赖预加载机制
【8月更文挑战第1天】探秘vite预加载机制
228 4
vite的快的原因居然如此简单!探秘其依赖预加载机制
|
10月前
|
移动开发 供应链 小程序
如何快速开发一套MES系统?
如何快速开发一套MES系统?本文介绍了从需求评估到持续优化的全流程策略,包括利用低代码平台快速搭建基础模块、梳理业务流程、核心功能模块搭建、用户参与测试、系统集成与数据一致性、培训部署及技术支持等环节。此外,还提供了现成的MES系统源码,帮助企业快速构建或定制化MES系统,减少开发时间和成本,确保系统稳定性和功能性。
573 1
|
运维 数据格式
实时数据同步的守护者:脏数据下载查看功能重磅上线
在复杂的数据同步过程中,难免会因为各种原因产生一些不准确、不完整或格式错误的脏数据。如果不能及时识别和处理这些脏数据,将可能影响数据的一致性和后续的业务分析。
227 5
|
存储 JavaScript
Vue3使用Pinia获取全局状态变量
Vue3使用Pinia获取全局状态变量
468 4
|
存储 负载均衡 算法
分布式-Zookeeper-Master选举
分布式-Zookeeper-Master选举
|
存储 安全 Python
Python 遍历字典的这6种方法,你都掌握了吗
Python提供了多种遍历字典的方法,可以根据实际需要选择合适的方法。无论是需要单独访问键或值,还是同时需要键和值,Python的字典都提供了简单而有效的方式来处理这些需求。

热门文章

最新文章