jQuery如何实现预加载图片功能_CSS学习

当前位置：网站建设 > 技术支持

jQuery如何实现预加载图片功能_CSS学习

资料来源：网络整理时间：2023/3/4 1:16:36 共计：3582 浏览

jQuery如何实现预加载图片功能？

在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。

1)概念：

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

例子：

<!DOCTYPE html>

<head>

<title>preload</title>

<style>

* {

margin: 0;

pading: 0;

}

a {

text-decoration: none;

}

.box {

text-align: center;

}

.btn {

display: inline-block;

height: 30px;

line-height: 30px;

border: 1px solid #ccc;

background: #fff;

padding: 0 10px;

margin-right: 50px;

color: #333;

}

.btn:hover {

background: #eee;

}

/*进度条样式*/

.loading {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

//撑满整个屏幕 background: #eee;

text-align: center;

font-size: 30px;

font-weight: bold;

}

.progress {

margin-top: 300px;

}

</style>

</head>

<body>

<!--无序预加载需要写进度条，当加载完毕后才能操作；

有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...

-->

<p>

</p>

</div>

</div>

var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',

'dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',

'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],

index = 0,

len = imgs.length;

$progress = $('.progress');

//有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法

// $.preload(imgs,{

// order:'ordered'

// });

//调用无序预加载 --imgs 数组存放预加载的图片

$.preload(imgs, {

//每张图片加载(load事件)一次触发一次each()

each: function (count) {

//进度条显示百分比进度

$progress.html(Math.round((count + 1) / len * 100) + '%');

//加载完毕

all: function () {

$('.loading').hide();

document.title = '1/' + len;//初始化第一张

}

});

//未封装成插件的无序预加载

// $.each(imgs,function(i,src){

// var imgObj = new Image(); //Image()实例用于缓存图片

// $(imgObj).on('load error',function(){

// $progress.html(Math.round((count + 1) / len * 100) + '%');

// if(count >= len - 1){

// $('.loading').hide();

// document.title = '1/' + len;

// }

// count++;//每加载完一张图片count加1

// });

// imgObj.src = src;//缓存图片

// });

$('.btn').on('click', function () {

if ('prev' === $(this).data('control')) {

index = Math.max(0, --index);

} else {

index = Math.min(len - 1, ++index);

}

document.title = (index + 1) + '/' + len;

$('img').attr('src', imgs[index]);

});

</script>

</body>

</html>

插件：

; (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);

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：已编译的HTML帮助文件怎么转成ppt或pdf格式的文件谢谢_CSS学习 | ·下一条：文字在网页顶部飘下的代码是什么_CSS学习