Layui源码解读之img函数

一、img 函数

    Layui.prototype.img = function(url, callback, error){
        var img = new Image(); // 创建 img
        img.src = url ; // 赋值 url
        
        // complete 更多内容查看 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/complete
        if(img.complete){ // ①
            return callback(img);
        }
        
        // onload 更多内容查看 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload
        img.onload = function(){
            img.onload = null ;; // 利于垃圾回收
            typeof callback === 'function' && callback(img); // ②
        }

        img.onerror = function(e){
            img.onerror = null;// 利于垃圾回收
            typeof error === 'function' && error(e); // ③ 
        }
    }

解释
①: img.complete 用来表示图片是否完全加载完成。如果完全加载成功则执行回调函数，并退出函数
②: onload函数，当资源已加载时被触发。函数内把onload设为null,同时判断回调函数类型如果是函数类型则执行回调
③: onerror 函数和onload函数形式一样，只不过处理场景不同。

二、函数流程图

如有问题欢迎指出

更多源码请查看github

源码github