懒加载,也就是延迟加载。

一、懒加载的具体表现

  当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。

举例1:某网站还没浏览到的图片img元素中的src为:…/static/common/com_images/img-loding.png
而浏览到的图片img元素中的src为://scpic3.chinaz.net/files/default/imgs/2023-05-15/f84850852fd8a265_s.jpg
(其实真正的图片链接在img元素中的data-original属性中,当浏览到的图片img元素中的data-original的值会赋给src)

举例2:某网站还没浏览到的图片img元素中的src2为://scpic3.chinaz.net/files/default/imgs/2023-05-15/f84850852fd8a265_s.jpg
而浏览到的图片img元素中的src2变为src。

二、懒加载的好处

  很多页面,内容很丰富,页面很长,图片较多。比如瀑布流,图片数量多且大,如果一次性加载完毕,用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。

三、懒加载的技术原理

  页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位,把真正的路径存在元素的“pic-url”(自定义命名)属性里,要用的时候就取出来。

四、懒加载的实现步骤

1、不要将图片地址放到src属性中,而是放到其它属性中。

2、页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

3、在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。

五、爬虫遇懒加载处理方法

Python网络爬虫中,解析服务器响应的文件的操作(遇到网页图片懒加载的解决方法):

#解析服务器响应的文件
tree = etree.HTML(content)
# 查找指定元素的alt属性值
name_list = tree.xpath('//div[@class="container"]//img/@alt')
# 查找指定元素的src(不存在懒加载情况解析方式)
src_list = tree.xpath('//div[@class="container"]//img/@src')
# 以上懒加载举例1的解决方式:
src_list = tree.xpath('//div[@class="container"]//img/@data-original')
# 以上懒加载举例2的解决方式:
src_list = tree.xpath('//div[@class="container"]//img/@src')