一键转贴的图片下载及发布文章功能都涉及对图片动态装载、自动滚屏的处理。
一、图片动态装载模式
图片动态装载主要有两种模式：
1、惰性装载（Lazy Loading）
基于用户体验考虑，大部分主流网站都采用了图片惰性装载（Lazy Loading）模式。也即在页面初始化加载时候，图片标签<img src=”” data-src=””> src属性的值是缺省图片，缺省图片较小。实际图片地址放在data-src中。当用户执行滚屏操作，由Javascript代码将src的值替换为data-src的值。
微信公众号等主流网站都采用此种模式。
2、瀑布流无限翻页（infinite scrolling）
有一些图片类网站，采用了瀑布流风格，例如pixiv.net、pinterest.com，instagram.com等。
瀑布流风格的网站，没有明确的分页导航，采用无限翻页（infinite scrolling）装载图片，一直到没有图片为止。
瀑布流无限翻页一般会结合惰性装载模式使用。
二、怎样判断是否有动态装载
目前并无通用的标准方法来判读网站是否采用了惰性装载和无限翻页，各个网站实现的技术原理各不相同，例如较新的技术 MutationObserver，IntersectionObserver，ResizeObserver，DOMSubtreeModified 。
只不过不管是惰性装载还是无限翻页，最底层的技术逻辑都涉及onscroll事件，因此可以通过判断要爬取的网页是否有onscroll事件来判断是否有动态装载行为。
基于安全考虑，各种主流浏览器都未直接提供获取当前页面事件的函数接口，chrome只在 DevTools->Event Listeners中提供了查看当前页面所有Event功能，但并未提供对外调用接口。
三、动态装载图片的核心处理逻辑
核心思路：
1、在content-scripts页面装载时候，注入JavaScript代码，代码主要完成如下功能
a、获取当前页面支持的Event Listeners，重点为scroll事件
b、自动滚屏处理
2、content-scripts页面判断是否有scoll事件以及页面是否到底部，从而判断是否需要自动滚屏
3、如果需要自动滚屏，通过消息方式通知background页面自动滚屏
4、background一边自动滚屏，同时还需要时刻判断页面是否已经滚动到底，从而停止滚屏，执行下载图片或发布文章操作
以上几步，最难的是第四步判断页面是否滚动到底的处理，耗费了很久才搞定。主要原因是涉及惰性装载和无限翻页两种模式的处理，这两种模式处理逻辑不同。
后面文章继续阐述相关技术方案。
转载请注明：虚拟号之家 » 一键转贴Chrome扩展开发经验总结8：动态装载图片的处理