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一点特殊用法
May 28 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
浅析vue component 组件使用
Mar 06 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
Vue实现多页签组件
Jan 14 Vue.js
基于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中大括号作用介绍
2012/03/22 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
让 python 命令行也可以自动补全
2014/11/30 Python
python字典改变value值方法总结
2019/06/21 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
电大物流学生的自我评价
2013/10/25 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
大学生实训报告总结
2014/11/05 职场文书
学校计划生育责任书
2015/05/09 职场文书
感谢师恩主题班会
2015/08/17 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
标准发言稿结尾
2019/07/18 职场文书