图片懒加载

What is 图片懒加载?

　　图片懒加载是一种网页优化技术,图片在被请求时也与普通静态资源一样,占用资源,然而当一个图片类型在刚被初次请求的时候不可以一次性加载所有的图片,因为这样太过于浪费网络资源,还增加了页面加载时间,通过前后端配合处理,使图片仅在浏览器当前视窗内出现的时候才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。

如何实现图片懒加载?

　　在网页源码中,在img标签中设置伪属性(通常为src2,original..等)去存放真正的图片链接,而并非直接存放到src属性中,当图片出现到页面可视化区域时,会动态将伪属性替换成src属性,完成图片的加载 !

机制

　　当用户拖动滚轮,当某些图片出现到可视化区域,马上加载源码中img标签,请求到数据!

相关案例

#站长素材案列
import requests
from lxml import etree
from urllib import request

url = "http://sc.chinaz.com/tupian/huangsetupian.html"
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
}
response = requests.get(url=url,headers=headers)
response.encoding = "utf-8"
page_text = response.text

tree = etree.HTML(page_text)

div_list = tree.xpath("//div[@id='container']/div")
for div in div_list:
    img_name = div.xpath("./p/a/text()")[0] + ".jpg"
    img_url = div.xpath("./div/a/img/@src2")[0] #src2为伪属性 !!!
    #如果中文乱码,可以用以下代码处理
#     img_name = img_name.encode('iso-8859-1').decode('gbk')
    request.urlretrieve(url=img_url,filename=f"./zz-img/{img_name}")
    print(f"{img_name}爬取成功")