实习知识点总结(4)

实习知识点总结
, ,

JS实现图片延迟加载

  • 需求：
    根据读者阅读顺序逐步加载漫画分镜，达到节省用户流量，提升用户体验和减少服务器处理请求的目的。
  • 思路：
    加载一组很小的icon去充当图片的占位符，监听窗口滚动，通过判断图片距离窗口顶部的距离，判断分镜是否将进入窗口可见区域，将icon地址替换为真正的图片地址。

实现过程：

  1. 给img标签增加一个自定义属性data-original用于存储分镜真正的加载地址，而此时src链接的地址是一张很小很小的icon。
  2. 计算漫画分镜是否进入窗口可视区域，需要获取的数据：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var bodyHeight = 窗口可视区域高度 ;
    var scrollHeight = 页面滚动的高度 ;
    var imgTop = 等待加载的图片分镜距离窗口顶部的距离 ;
    监听窗口滚动时执行函数
    window.onscroll= function(){
    If ((imgTop - scrollHeight) <= bodyHeight) {
    // 分镜进入可视区域
    // 将分镜的src替换为存在当前img标签的data-origina中的真正分镜地址
    }
    }
  3. 移动web端判断手指上滑还是下滑
    由于移动端没有鼠标事件，需要通过touchstart、touchmove、touchend去监听触摸事件。Touchstart记录初始位置，touchmove记录按住屏幕移动。
    判断很简单，touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。
    这在逻辑上没有任何问题。但在实际操作中，手指的上下滑动其实是很难直上直下的，只要稍微有点斜，就会被X轴的判断先行接管。因此就需要去增加一个判断，比较哪个的差值更大即可。
  4. 跳转到历史分镜
    通过监听touchstart事件，去记录当前手指所在的分镜号，并记录此分镜。
    当页面加载时首先判断是否存在历史分镜号，若有，去查找该序号的img为其设置一个id，然后跳转到该节点。
    window.location.hash 属性
    location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://localhost，此时将location.hash = go（go为页面某个节点的id值），页面就会跳转到这个锚点上。