图片懒加载概念
图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。
原理:
先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src), 然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中。达到懒加载的效果。
案例:抓取站长素材http://sc.chinaz.com/中的图片数据
在浏览器中加载时,在可视化区域的图片是src,不在可视化区域的是src2。但是使用request模块发送请求时,没有可视化区域,所以都是src2。
1 # -*- coding:utf-8 -*- 2 import requests 3 from lxml import etree 4 if __name__ == "__main__": 5 url = ‘http://sc.chinaz.com/tupian/gudianmeinvtupian.html‘ 6 headers = { 7 ‘User-Agent‘: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36‘, 8 } 9 #获取页面文本数据 10 response = requests.get(url=url,headers=headers) 11 response.encoding = ‘utf-8‘ 12 page_text = response.text 13 #解析页面数据(获取页面中的图片链接) 14 #创建etree对象 15 tree = etree.HTML(page_text) 16 div_list = tree.xpath(‘//div[@id="container"]/div‘) 17 #解析获取图片地址和图片的名称 18 for div in div_list: 19 image_url = div.xpath(‘.//img/@src2‘) #src2伪属性 20 image_name = div.xpath(‘.//img/@alt‘) 21 print(image_url) 22 print(image_name)
原文:https://www.cnblogs.com/Summer-skr--blog/p/11402471.html