'I' was "lazy" have to load it ----- implement lazy loading images

What is lazy loading

Lazy loading is a 网页优化技术

effect

Pictures as a web resource, will request the same network resources, resulting in the first screen page load time is stretched .

If the one-time resource page to load all the pictures, in conjunction with the time a large number of image requests. The lazy loading, loading sucked picture, from the original load the breath becomes loaded on demand mode, the same time reducing the resource request initiated to speed up the page to open the speed, optimize the user experience.

principle

By JavaScript脚本that loads the picture when the picture appears only in the visible area of the current window. Reduce the number of technology has reached the first screen for the first time requested resource picture is called lazy loading images

https://lanhai1.github.io/archives/ personal blog

Thinking

• First get the picture elements stored in an array of convenient rendered back to page

---

• Package function => determines whether the image can be loaded

---

• Package function => acquiring image information of the window
• Visual comparison window is greater than a height equal to the top value of the image with respect to the window
• Compare the return value

---

• Package function => 1 Load picture parameters: Parameters element 2: array index value
• Get custom attributes (src attribute of the element is stored)
• Src correct assignment elements
• Delete the rendered image from the array

---

• Wrapper function => scroll event
• Registration time for the browser to scroll to continue monitoring whether lazy load

---

• Package function => Initialization
• Call whether to load picture function
• Scroll function call event

---

typescript Code

// 图片懒加载类
class LazyLoads {
    imglist: Array<Element>;
    // 构造器
    constructor(public el: string) {
        // 获取图片元素 追加至数组
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    }
    // 判断该图片是否可以加载
    canILoad = () => {
        // 循环遍历数组
        for (let i = this.imglist.length; i--;) {
            this.getBound(this.imglist[i]) && this.loadImage(this.imglist[i], i);
        }
    }
    // 获取图片与窗口的信息
    getBound = (el: Element): boolean => {
        // 获取元素相对于视窗的位置
        let bound = el.getBoundingClientRect();
        // 获取window可视高度
        let clientHeight = window.innerHeight;
        // 判断是否需要加载数据
        return (bound.top <= clientHeight);
    }
    // 加载图片
    loadImage = (el, index: number) => {
        // 获取自定义属性
        let src = el.getAttribute('data-lanhai');
        // 赋值
        el.src = src;
        // 删除已经渲染了的图片
        this.imglist.splice(index, 1);
    }
    getScroll = () => {
        // 为浏览器注册滚动时间 监测是否继续懒加载
        window.addEventListener('scroll', () => {
            this.imglist.length && this.canILoad();
        });
    }
    // 初始化
    init = () => {
        this.canILoad();
        this.getScroll();
    }
}
// 实例化对象，参数则是需要使用懒加载的图片
let start = new LazyLoads('img')
// 初始化
start.init()

After compiling JavaScript code

// 图片懒加载类
var LazyLoads = /** @class */ (function () {
    // 构造器
    function LazyLoads(el) {
        var _this = this;
        this.el = el;
        // 判断是否该图片是否可以加载
        this.canILoad = function () {
            // 循环遍历数组
            for (var i = _this.imglist.length; i--;) {
                _this.getBound(_this.imglist[i]) && _this.loadImage(_this.imglist[i], i);
            }
        };
        // 获取图片与窗口的信息
        this.getBound = function (el) {
            // 获取元素相对于视窗的位置
            var bound = el.getBoundingClientRect();
            // 获取window可视高度
            var clientHeight = window.innerHeight;
            // 判断是否需要加载数据
            return (bound.top <= clientHeight);
        };
        // 加载图片
        this.loadImage = function (el, index) {
            // 获取自定义属性
            var src = el.getAttribute('data-lanhai');
            // 赋值
            el.src = src;
            // 删除已经渲染了的图片
            _this.imglist.splice(index, 1);
        };
        this.getScroll = function () {
            // 为浏览器注册滚动时间 监测是否继续懒加载
            window.addEventListener('scroll', function () {
                _this.imglist.length && _this.canILoad();
            });
        };
        // 初始化
        this.init = function () {
            _this.canILoad();
            _this.getScroll();
        };
        // 获取图片元素 追加至数组
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    }
    return LazyLoads;
}());
// 实例化对象，参数则是需要使用懒加载的图片
var start = new LazyLoads('img');
// 初始化
start.init();

Reproduced in: https: //www.jianshu.com/p/e000ad10d1a1