zoukankan      html  css  js  c++  java
  • 图片懒加载

    图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。

    为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。

    网站一般如何实现图片懒加载技术

    在网页源码中,在img标签中首先会使用一个“伪属性”(通常使用src2,original……)去存放真正的图片链接而并非是直接存放在src属性中。

    当图片出现到页面的可视化区域中,会动态将伪属性替换成src属性,完成图片的加载。

    示例:爬取站长素材图片

    #!/usr/bin/env python
    # -*- coding:utf-8 -*-
    import requests
    from lxml import etree
    if __name__ == "__main__":
         url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html'
         headers = {
             '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',
         }
         #获取页面文本数据
         response = requests.get(url=url,headers=headers)
         response.encoding = 'utf-8'
         page_text = response.text
         #解析页面数据(获取页面中的图片链接)
         #创建etree对象
         tree = etree.HTML(page_text)
         div_list = tree.xpath('//div[@id="container"]/div')
         #解析获取图片地址和图片的名称
         for div in div_list:
             image_url = div.xpath('.//img/@src2') #src2伪属性
             image_name = div.xpath('.//img/@alt')
             print(image_url) #打印图片链接
             print(image_name)#打印图片名称


  • 相关阅读:
    使用Xtrabackup 备份mysql数据库
    Myeclipse总结
    intellij idea问题及技巧
    Tomcat相关配置
    Spark常用算子总结
    前端开发经验
    最近用到的SQL语句
    subline text使用心得
    天龙八部谁是主角?(MR词频统计)
    elasticsearch CURL命令
  • 原文地址:https://www.cnblogs.com/sxy-blog/p/13215886.html
Copyright © 2011-2022 走看看