fileinput.js插件源码里实现image预加载

          这周的工作周，领导主要考虑到性能优化，提高网站的加载速度，由于该项目有很多上传图片，图片查看的功能，所以原先引用了Bootsrtap的fileinput文件上传插件，在修改填写页面时有大量的文件上传模块，考虑到回显时图片资源过多，对于服务器来说,最消耗系统资源，增加了网页加载速度，用户交互极差；所以在网上翻阅了一些资料，采用了预加载的方式，提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

      1.在fileinput.js的 _initPreview（回显）方法的最后插入以下 代码：

         if(self.$container.find('img').length){//fileinput.js源码 回显图片
                    let imgList=self.$container.find('img');
                    for(let i = 0 ; i <  imgList.length;i++){
                        console.log(imgList.eq(i).attr("data-src"));
                        let img= new Image();//创建image对象
                        img.src= imgList.eq(i).attr("data-src");//获取回显图片的data-src属性 里面存的是文件路径
                        img.onload = function () {//img对象加载成功后 再赋值给图片的src属性进行加载，在未加载成功时，先显示<img>的加载中的背景图      imgList.eq(i).removeClass("file-preview-image_load file-    preview-image_error").addClass("file-preview-image_succ");
                            imgList.eq(i).attr("src",imgList.eq(i).attr("data-src"));
                        };
                        img.onerror=function(){ //img对象加载失败时 显示 加载失败的背景图
                            imgList.eq(i).removeClass("file-preview-image_load file-preview-image_succ").addClass("file-preview-image_error");
                        };

                    }

2.在fileinput.js的_ajaxSubmit上传方法里，在上传成功后  self.ajaxRequests.push($.ajax(settings)）后添加then()里的回调函数也插入以上代码。

3.在fileinput.js的 _initTemplateDefaults（模板默认项）里修改图片删除src路径，并添加自定义属性data-src赋值为图片路径，去掉title和alt（在图片加载失败时添加加载失败的样式）。代码如下：

 tImage = '<img data-src="{data}" class="file-preview-image kv-preview-data file-preview-image_load"  ' +
                'style="max-width:100%;max-height:100%;">\n';

在源码中找到位置，实属不易，打了很多debugger,才找到，特此记录一下，未免以后遇到同样的问题，可以复用此代码。查阅资料有很多解决图片资源过多时的方式，这里只是其中一种预加载的方式，也是查资料所得，看了很多文章，感觉这几篇文章不错，前端初级，每天收获一点点，也会很开心。想了解更多可去翻翻：

https://blog.csdn.net/h1534589653/article/details/77528367

https://www.cnblogs.com/Leo_wl/p/3526254.html，

https://blog.csdn.net/u012496505/article/details/73824327

https://www.cnblogs.com/mysearchblog/p/5936551.html