JS图片预加载插件怎么用
这篇文章主要介绍了JS图片预加载插件怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销,产品发布一步更新,电脑网络+移动网络一网打尽,满足企业的营销需求!成都创新互联公司具备承接各种类型的成都网站设计、网站建设项目的能力。经过10余年的努力的开拓,为不同行业的企事业单位提供了优质的服务,并获得了客户的一致好评。
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验。
1)概念:
懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
2)区别:
两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
例子:
preload 0%
插件:
; (function ($) { function PreLoad(imgs, options) { //保存图片到数组 this.imgs = (typeof imgs === 'string') ? [imgs] : imgs; this.opts = $.extend(PreLoad.defaults, options); // this._unordered();//如果只有无序预加载 if (this.opts.order === 'ordered') { this._ordered(); } else { this._unordered();//默认是无序预加载 } }; PreLoad.defaults = { order: 'unordered', //指定默认加载方式为无序 each: null, //每一张图片加载完毕后执行 all: null //所有图片加载完毕后执行 }; //有序预加载 PreLoad.prototype._ordered = function () { var opts = this.opts, imgs = this.imgs, len = imgs.length, count = 0; load(); function load() { var imgObj = new Image(); $(imgObj).on('load error', function () { //相当于if(opts.each){ opts.each(); } ,如果有配置each()方法则调用,后面的all()同理 opts.each && opts.each(count); if (count >= len) { //所有图片加载完毕 opts.all && opts.all(); } else { //如果没加载完,继续调用自身加载下一张 load(); } count++; }); imgObj.src = imgs[count];//缓存图片 }; }; //无序加载 PreLoad.prototype._unordered = function () { var imgs = this.imgs, opts = this.opts, count = 0, len = imgs.length; $.each(imgs, function (i, src) { //判断图片数组中的每一项是否为字符串,不是字符串会导致出错,因此返回 if (typeof src != 'string') return; var imgObj = new Image(); $(imgObj).on('load error', function () { //判断opts.each是否存在,不存在则不执行 opts.each && opts.each(count); if (count >= len - 1) { //判断opts.all是否存在,存在则执行 opts.all && opts.all(); } count++; }); imgObj.src = src;//缓存图片 }); }; //由于不用具体的对象去调用,因此用$.extend(object)挂载插件. $.extend({ //preload为插件名 preload: function (imgs, opts) { new PreLoad(imgs, opts); } }); })(jQuery);
感谢你能够认真阅读完这篇文章,希望小编分享的“JS图片预加载插件怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章标题:JS图片预加载插件怎么用
转载源于:http://scyanting.com/article/jophds.html