首页 > 其他 > 详细

06 动态页面获取---图片懒加载

时间:2019-08-23 22:17:24      阅读:119      评论:0      收藏:0      [点我收藏+]

图片懒加载概念

  图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为图片懒加载”。

 

原理:

  先将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)                   

 

06 动态页面获取---图片懒加载

原文:https://www.cnblogs.com/Summer-skr--blog/p/11402471.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!