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数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
聊聊JS ES6中的解构
Apr 29 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
PHP的面试题集
2006/11/19 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
Prototype Selector对象学习
2009/07/23 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
DOM 高级编程
2015/05/06 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python+POP3实现批量下载邮件附件
2018/06/19 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python计算n的阶乘的方法代码
2019/10/25 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
详解pandas映射与数据转换
2021/01/22 Python
入党自我鉴定
2014/03/25 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
公司担保书范文
2014/05/21 职场文书
为自己工作观后感
2015/06/11 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS