博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生JS实现最简单的图片懒加载
阅读量:5894 次
发布时间:2019-06-19

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

hot3.png

懒加载

什么是懒加载

懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。

什么时候用懒加载

当页面中需要一次性载入很多图片的时候,往往都是需要用懒加载的。

懒加载原理

我们都知道HTML中的<img>标签是代表文档中的一个图像。。说了个废话。。

<img>标签有一个属性是src,用来表示图像的URL,当这个属性的值不为空时,浏览器就会根据这个值发送请求。如果没有src属性,就不会发送请求。

嗯?貌似这点可以利用一下?

我先不设置src,需要的时候再设置?

nice,就是这样。

我们先不给<img>设置src,把图片真正的URL放在另一个属性data-src中,在需要的时候也就是图片进入可视区域的之前,将URL取出放到src中。

 

转载于:https://my.oschina.net/webcaorui/blog/1563493

你可能感兴趣的文章
软件测试的基本知识
查看>>
LNMP架构搭建
查看>>
Forrester:2017年度安全分析平台厂商评估(Forrester Wave)
查看>>
oracle基本命令随笔(2)
查看>>
不安装Oracle客户端也能使用PL/SQL
查看>>
WebBuilder7 在Linux、Tomcat、MySQL下配置注意事项
查看>>
word转html(一)
查看>>
我的友情链接
查看>>
如何高效进行OA系统选型
查看>>
很奇怪的问题。点击button会自动刷新页面?
查看>>
SSH原理与运用(二):远程操作与端口转发
查看>>
linux服务
查看>>
java 定时备份数据库
查看>>
Eclipse 将项目做成第三方引用
查看>>
Linux常用系统命令
查看>>
centos 6.4 x86_64 yum安装 xen 4.2.2
查看>>
【JAVA学习】Iterator 用法小结
查看>>
nginx配置ssl证书,允许ssl访问
查看>>
程序员经常遇到的几个问题!
查看>>
Pytext简介:facebook的基于PyTorch的NLP框架
查看>>