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 相关文章推荐
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
js实现特别简单的钟表效果
Sep 14 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
咖啡常见的种类
2021/03/03 新手入门
php代码运行时间查看类代码分享
2011/08/06 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
javascript 精粹笔记
2010/05/09 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
pyenv命令管理多个Python版本
2017/03/26 Python
高效使用Python字典的清单
2018/04/04 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python生成word合同的实例方法
2021/01/12 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
小学新学期寄语
2014/04/02 职场文书
就业协议书范本
2014/10/08 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
工伤调解协议书
2016/03/21 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
Python 图片添加美颜效果
2022/04/28 Python