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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
webpack 模块热替换原理
Apr 09 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python文件和目录操作方法大全(含实例)
2014/03/12 Python
简单理解Python中的装饰器
2015/07/31 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python异常处理操作实例详解
2018/05/10 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
单位在职证明范本
2014/01/09 职场文书
活动总结书
2014/05/08 职场文书
人民调解员培训方案
2014/06/05 职场文书
学校运动会霸气口号
2014/06/07 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
小学生通知书评语
2014/12/31 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
pycharm debug 断点调试心得分享
2021/04/16 Python
如何用JavaScipt测网速
2021/05/09 Javascript
深入理解Vue的数据响应式
2021/05/15 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript