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

弘焕
2023-12-01

          这周的工作周,领导主要考虑到性能优化,提高网站的加载速度,由于该项目有很多上传图片,图片查看的功能,所以原先引用了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

 类似资料: