jquery实现图片预加载


Posted in Javascript onDecember 25, 2015

使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理。

什么时候使用图片预加载?

如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('img').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好。那么如何解决这个问题 呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图片的加载速度,这的确是个好方法,不过有时候我们也可以从前台找一些解决的 方法。下面我来介绍一种在实际应用中经常会使用到的js预加载的方法。
首先在输出图片的时候我们做一些处理<imgdata="这里是我们要显示图片的实际地址"src="这里是一张默认显示的小图片,可以快速加载到页面。可以是所有图片使用统一的图片也可以是要显示图片的缩略图"alt="图片名"/> 处理完html我们开始写js了,在这里我使用了jquery的类库。   

$('img[data]').load(function(){ 
 var __this__ = $(this); 
 var url = __this__.attr('data'); 
 var src = __this__.attr('src'); 
 if(url ==''|| url == src)//这里判断如果图片实际地址不存在或者已经加载不处理 
 { 
 return; 
 } 
 var img =newImage();//实例化一个图片的对象 
 img.src = url;//将要显示的图片加载进来 
 if(img.complete)//如果图片已经加载存在浏览器缓存中直接处理 
 { 
 __this__.attr('src',url);//将要显示的图片替换过来 
 return; 
 } 
 img.onload =function(){//要显示的图片加载完成后做处理 
 __this__.attr('src',url); 
 } 
});

实例讲解:Javascript,Jquery实现页面图片预加载百分比展现

如果需要在页面初始加载时显示加载进度。主要是指图片很多的情况下:

可以使用第三方Jquery插件jquery.imgpreload.min.js 
调用里面的方法:imgpreload即可,实例如下:

var imgNum = 0;
var images = [];
$(function(){ preloadImg(); });
 
//里面有两种方式
function preLoadImg() {
 //第一种方式:通过dom方法获取页面中的所有img,包括<img>标签和css中的background-image
 /*get all imgs those tag is <img>
 var imgs = document.images;
 for (var i = 0; i < imgs.length; i++) {
 images.push(imgs[i].src);
 }
 //get all images in style
 var cssImages = getallBgimages();
 for (var j = 0; j < cssImages.length; j++) {
 images.push(cssImages[j]);
 }*/
 
 //第二种方式:把所有该网页上用到的图片文件都预先放入一个数组里 
 $.imgpreload(['images/bg1.jpg', 'images/bg2.jpg'], function () {
  //此处是显示进度百分比时需要用到的背景图,这个可以先加载进去
 });
 
 //then push all other images in array to load 
 images.push("images/test_1.png");
 images.push("images/test_2.png");
 images.push("images/test_3.png");
 //。。。
 images.push("images/test_n.png"); 
 
 /*这里是真正的图片预加载 preload*/
 $.imgpreload(images,
 {
 each: function () {
  /*this will be called after each image loaded*/
  var status = $(this).data('loaded') ? 'success' : 'error';
  if (status == "success") {  
  var v = (parseFloat(++imgNum) / images.length).toFixed(2);
  $("#percentShow").html(Math.round(v * 100) + "<sup>%</sup>");  
  }
 },
 all: function () {
  /*this will be called after all images loaded*/
  $("#percentShow ").html("100<sup>%</sup>");
 
  $("percentShow").fadeOut(1000);  
  $(".main").show();
 }
 });
}
 
//get all images in style(此方法引用其他博客的)
function getallBgimages() {
 var url, B = [], A = document.getElementsByTagName('*');
 A = B.slice.call(A, 0, A.length);
 while (A.length) {
 url = document.deepCss(A.shift(), 'background-image');
 if (url) url = /url\(['"]?([^")]+)/.exec(url) || [];
 url = url[1];
 if (url && B.indexOf(url) == -1) B[B.length] = url;
 }
 return B;
}
 
document.deepCss = function (who, css) {
 if (!who || !who.style) return '';
 var sty = css.replace(/\-([a-z])/g, function (a, b) {
 return b.toUpperCase();
 });
 if (who.currentStyle) {
 return who.style[sty] || who.currentStyle[sty] || '';
 }
 var dv = document.defaultView || window;
 return who.style[sty] ||
 dv.getComputedStyle(who, "").getPropertyValue(css) || '';
}
 
Array.prototype.indexOf = Array.prototype.indexOf ||
 function (what, index) {
 index = index || 0;
 var L = this.length;
 while (index < L) {
  if (this[index] === what) return index;
  ++index;
 }
 return -1;
 }

这样就能在页面图片很多,且网速很慢的情况下给予用户一个百分比提示。 
在做这个之前,由于每次本地测试加载都很快,百分比瞬间到100%然后消失,为了看上去有那么一回事,我还写了一个伪百分比进度条,仅供参考:

var t = window.setTimeout("preLoad()", 100);
 function preLoad() {
 $("#loading div").animate({ width: step + "px" }, 50).text(step + "%");
 step += 1;
 if (step <= 100) {
  t = window.setTimeout("preLoad()", 100);
 } else {
  clearTimeout(t);
  $("#loading").fadeOut(1000);
  $("#preloadImg").fadeOut(1000);
  
  $(".main").show();
 }

这是一个页面初始化完成之后,在页面上有一个模拟百分比不断增长的过程,到100%后消失进度条,显示主页面,不过跟实际页面加载没任何关系哦。

本文已被整理到了《jquery图片加载方法汇总》 ,欢迎大家学习阅读。

以上就是针对jquery图片预加载进行的详细学习,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript中onclick(this)用法介绍
Apr 19 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 #Javascript
使用堆实现Top K算法(JS实现)
Dec 25 #Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 #Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 #Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
php你的验证码安全码?
2007/01/02 PHP
PHP生成月历代码
2007/06/14 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
js打造数组转json函数
2015/01/14 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
python ansible服务及剧本编写
2017/12/29 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
2015年仓库工作总结
2015/04/09 职场文书
经济纠纷起诉状
2015/05/20 职场文书