博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端懒加载以及预加载
阅读量:5748 次
发布时间:2019-06-18

本文共 618 字,大约阅读时间需要 2 分钟。

懒加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片。

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

1.懒加载:

意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

实现方式:

1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟。

2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。

3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条 时正好能看到图片。

2.预加载:

意义: 牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。

实现方式:

可以用CSS(background)、JS(Image)、HTML(<img />)都可以。

常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。
只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

 

转载于:https://www.cnblogs.com/xiaoan0705/p/8818379.html

你可能感兴趣的文章
python分类
查看>>
GitBlit (1)-- 在linux 安装 GitBlit 并运行
查看>>
程序是如何执行的(一)a=a+1
查看>>
BZOJ - 3578: GTY的人类基因组计划2
查看>>
【http】post和get请求的区别
查看>>
EL表达式无法显示Model中的数据
查看>>
linux下使用过的命令总结(未整理完)
查看>>
时间助理 时之助
查看>>
英国征召前黑客组建“网络兵团”
查看>>
PHP 命令行模式实战之cli+mysql 模拟队列批量发送邮件(在Linux环境下PHP 异步执行脚本发送事件通知消息实际案例)...
查看>>
pyjamas build AJAX apps in Python (like Google did for Java)
查看>>
centos5.9使用RPM包搭建lamp平台
查看>>
Javascript String类的属性及方法
查看>>
[LeetCode] Merge Intervals
查看>>
Struts2 学习小结
查看>>
在 Linux 系统中安装Load Generator ,并在windows 调用
查看>>
chm文件打开,有目录无内容
查看>>
whereis、find、which、locate的区别
查看>>
一点不懂到小白的linux系统运维经历分享
查看>>
桌面支持--打不开网页上的pdf附件解决办法(ie-tools-compatibility)
查看>>