jquery 图片预加载
/图片无序预加载
(function($){ function Preload(imgs,fns){ this.imgs=(typeof imgs==="string")?[imgs]:imgs; this.fns=$.extend({},Preload.fns,fns);//把fns 覆盖到Preload上 然后添加到{}返回 if(this.fns.loadMethod=="unorderload"){//是无序 还是有序 this._unorderload();
}
else{ this._orderload(); } } Preload.fns={
loadMethod:null,//有序还是无序的方式
eachLoadImg:null, //每张图片加载完所执行的函数
allLoadImg:null //所有图片加载完所要执行的函数 } Preload.prototype._orderload=function(){
var imgs=this.imgs,
len=imgs.length,
fns=this.fns,
num=0; function load(){ var imgObj=new Image(); $(imgObj).on("load error",function(){ fns.each && fns.each(); //存在 才会执行 if(num<len){ load(); //没有加载完就继续加载 函数执行是有顺序的
} else{ fns.allLoadImg && fns.allLoadImg();//加载完全部 } }); imgObj.src=imgs[num];
num++; } load(); } Preload.prototype._unorderload=function(){ var imgs=this.imgs,
len=imgs.length,
fns=this.fns,
num=0; $.each(imgs,function(i,src){ if(typeof src!="string") return; var imgObj=new Image();
$(imgObj).on("load error",function(){ fns.eachLoadImg && fns.eachLoadImg(num,len); if( num==len-1){ fns.allLoadImg && fns.allLoadImg(); } num++; });
imgObj.src=src; }); } $.extend({ //给jQuery上增加新函数 preload:function(imgs,fns){ new Preload(imgs,fns); } }); })(jQuery);
使用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>有序预加载</title>
<style>
*{margin: 0; padding: 0;} img{
width:100%;
vertical-align:top; }
.imgBox{
width:500px;
margin:100px auto; }
#prevImg, #nextImg{ width:60px;
font-size:15px;
height:30px;
line-height:30px;
text-align:center;
background: #686868;
position:absolute;
color:#000;
text-decoration:none;
margin-top:-50px;
} #prevImg{ left:40%; } #nextImg{ left:55%; } </style>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/unorderload.js"></script>
<script> $(function(){ var imgs=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
var len=imgs.length;
var index=0;
$.preload(imgs,{}); $("#control-img-btn").on("click","a",function(){ if($(this).hasClass("prevImg")){ index=Math.max(0,--index); //上一张
} else{ index=Math.min(len-1,++index);//下一张 } $("#imgBox img").attr("src",imgs[index]); }); }); </script>
</head>
<body>
<div class="imgBox" id="imgBox">
<img />
</div>
<p id="control-img-btn">
<a href="javascript:;" id="prevImg" class="prevImg">上一页</a>
<a href="javascript:;" id="nextImg" class="nextImg">下一页</a>
</p>
</body>
</html>
jquery 图片预加载的更多相关文章
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 闭包,jQuery插件的写法:图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- jquery实现图片预加载提高页面加载速度
使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...
- 图片预加载的插件使用-jquery.imgpreload.min.js
使用方法: //图片预加载 var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中: the_images.push( 'bg.jpg' ); var load ...
- 【JQuery Zepto插件】图片预加载
屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- html5 app图片预加载
function Laimgload(){} //图片预加载JS Laimgload.prototype.winHeight = function(){ //计算页面高度 var winHeight ...
随机推荐
- 神经网络中的激活函数tanh sigmoid RELU softplus softmatx
所谓激活函数,就是在神经网络的神经元上运行的函数,负责将神经元的输入映射到输出端.常见的激活函数包括Sigmoid.TanHyperbolic(tanh).ReLu. softplus以及softma ...
- 奇妙的CSS之伪类与伪元素
我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...
- CxGrid 表格标题头居中
选中这些列后 搞.
- Git missing in VS Code – No source control providers
解决办法:管理->设置->搜索[git.enabled]和[git.path],分别设置下即可. 注意"git.enabled: true",只设置git.path是不 ...
- Struts 2 Tutorial
Apache Struts 2 is an elegant, extensible framework for creating enterprise-ready Java web applicati ...
- PHP5.6中php-fpm的配置、启动、关闭和重启
转:http://blog.csdn.net/field_yang/article/details/52401994 该文主要讲述:如何配置PHP-fpm.常见报错解决方法和php-fpm的启动.关闭 ...
- javascript重要类方法笔记
三.数据结构和map 1.大括号数据结构:{} 1.1 键值对形式,类似Map 1.2 var treeNode={}; treeNode ...
- Java第三阶段学习(二、IO流--------递归,字节流Stream)
一.递归 定义:指方法在方法内调用自己 适用于方法的运算主体不变,但运行的时候,参与运算的方法参数会变化注意:一定要给递归一个出口,否则内存溢出 练习题1:使用递归打印文件夹中所有的文件,包含子目录中 ...
- js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明
js Code: <script> window.onload = function() { for (i = 0; i < 500; i++) { var x = document ...
- forkcms 开启调试模式
You can enable debug mode by adding "SetEnv FORK_DEBUG 1" in your virtualhosts file.