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