zoukankan      html  css  js  c++  java
  • 首页优化图片分块延迟加载实现

    简介:

    本篇内容本来是想作为JS单元测试的Demo放出,但是看到不少朋友对分块延迟加载的具体实现感兴趣,我就在这里跟大家探讨一下,请多多提建议。

    分析:

    1.       适用于页面可以将图片划分区块,如无名良品首页的各个楼层。

    2.       多个区块,并且区块的粒度适中,每个最好在半屏到2屏之间。

    3.       更适合于每个区块上有导航的情形,因为会导航到中间区块,上面下面的区块都不加载图片。

    实现:

    1.       更改页面img 元素,将<img src=”图片地址”/> 更改为:<img data-ks-lazyload=” 图片地址” />,其中 data-ks-lazyload 为自定义属性,自己可以指定属性名。

    2.       初始化:

    1) 遍历区块内所有图片,包含 data-ks-lazyload 属性的图片放入数组,添加默认的占位图片(Loading图片)<img data-ks-lazyload=” 图片地址”  src=”loading 图片”/>

    2) 判断当前区块是否在用户视图内,如果在用户视图内则加载所有图片,不在用户视图内,则添加窗口Scroll事件和窗口Resize事件。

    3.       加载图片

    1) 当用户视图移动到当前区块时,如果注册了事件则加载图片,加载完移除事件。

    2) 加载区块图片时,将图片改为<img src=”图片地址”/>,在ie6,ie7下修正图片大小。

    4.       Demo 下载

    总结:

    Demo中的代码比较简单大部分是Kissy datalazyload.js中的,其中重写了判断是否在当前视图内,和加载区块图片的函数,当用户停留在具体某区块超过5秒后可以加载其他区块,这个实现没写在代码中,感兴趣的可以自己实现一下。下面还有一遍博客,是针对分块延迟加载JS做的单元测试,共同学习,共同讨论

  • 相关阅读:
    python--初识面向对象
    python--内置函数, 匿名函数
    P2249 【深基13.例1】查找
    P5143 攀爬者
    P1116 车厢重组
    P1059 明明的随机数
    P1152 欢乐的跳
    字符数组
    nth_element(取容器中的第n大值)
    费曼学习法
  • 原文地址:https://www.cnblogs.com/zaohe/p/2065675.html
Copyright © 2011-2022 走看看