图片懒加载

Posted crazysheldon1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片懒加载相关的知识,希望对你有一定的参考价值。

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}爬取成功")

 

以上是关于图片懒加载的主要内容,如果未能解决你的问题,请参考以下文章

图片懒加载_intersectionObserver

设计模式(节流模式-----图片懒加载)

原生js实现图片列表懒加载和截流

实现图片懒加载(及优化相关)

实现图片懒加载(及优化相关)

原生javascript代码懒加载