JQuery
jQuery插件DLoad实现延迟加载图片详解
本文章给各位介绍一个jQuery插件DLoad实现延迟加载图片编程全过程，有需要了解的同学可参考。
修改:
1.减少代码量
2.加快代码运行;
3.某些加载时出现的错误;
4.部分图片加载失败
5.使调用更方便
隐藏并显示等待 $.fn.dload.hide($(‘#img’)) 加载并显示图片$.fn.dload.show(‘#img’)
多个注册 $(‘img[org]‘).DLoad();
不用些$.fn.extend 扩展jquery 了
以前的方法基本上都兼容
只支持top的加载 暂时没实现left 的加载 如果 您的页面为1000000000px或 很大的width 则这个插件暂时帮不了您
使用方法 基本不变 extend 不建议使用 直接在插件上添加方法; 想不到 如果 很方便的 同时添加到 function DLoad $.fn.Dload 和 $.fn.dload 上 郁闷
| 代码如下 | 复制代码 |
//自定义加载方式; $(‘#extende’).DLoad({ extend: { mouseover: function(){ var tar = this.getTarget(); var obj = this.getHolder( tar ); obj.bind( ‘mouseover’,function(){ $.fn.dload.load( tar ); }) } }, mouseover: true })
| |
旧:
该插件仅供学习用途, 请勿用于网站;
如对插件本身有任何不明白与建议或BUG, 请留言或加QQ:307853201
如对插件本身有任何修改, 欢迎留言给本人, 相互学习;
改插件暂时只在FF,IE7以上版本,TT,APPLE浏览器,GOOGLE浏览器,测试.其他浏览器暂没测试;
加载插件;
| 代码如下 | 复制代码 |
<script language=“javascript” src=“jquery.js”></script> <script language=“javascript” src=“dload.js”></script> <script language=“javascript”> $(document).ready(function(){ $.fn.extend({‘dload’:DLoad}) </script>
| |
HTML org属性为延迟加载的图片地址;
| 代码如下 | 复制代码 |
<img src=“” org=“../001.jpg” id=“default” style=“width:100px;height:100px;” />
| |
简单使用: 默认方法: 滚动动作条 当当前screen 移动到图片所在位置时 则自动加载图片;
| 代码如下 | 复制代码 |
<script language=“javascript” src=“jquery.js”></script> <script language=“javascript” src=“dload.js”></script> <script language=“javascript”> $(document).ready(function(){ $.fn.extend({‘dload’:DLoad})
//默认滚动加载; $(‘#default‘).dload(); </script>
| |
若要自定义属性:
| 代码如下 | 复制代码 |
HTML: <img src=“” myattr=“../001.jpg” id=“default” style=“width:100px;height:100px;” />
JS: $(‘#combination_1′).dload({ ‘srcName’ : ‘myattr’, ‘click’ : true });
| |
其他方法有:
| 代码如下 | 复制代码 |
//滚动加载; $(‘#scroll’).dload({ ‘scroll’:true });
//点击加载; $(‘#click’).dload({ ‘click’:true });
//双点击加载; $(‘#dblclick’).dload({ ‘dblclick’:true });
//延迟加载; $(‘#timer’).dload({ ‘timer’:true, ‘delayTime’:3000 });
| |
如果想自定义事件可以将 插件 不扩展给JQuery 即:可以不写$.fn.extend({‘dload’:DLoad})
以下是将所有CLASS=”trigger”的图片都隐藏起来; 当点击 事件发生时 加载所有隐藏的图片;
| 代码如下 | 复制代码 |
//自定义点击事件; var trigger = new DLoad({‘target’:$(‘.trigger’)}); $(‘#triggerKeyShow’).one( ‘click’, function(){ trigger.load(); })
| |
如果加载则可以这样写:
| 代码如下 | 复制代码 |
//自定义点击事件; var trigger_1 = $(‘#trigger’).dload({}); trigger_1.load();
| |
如果要改变样式可以把样式 写入
| 代码如下 | 复制代码 |
//设置等待CSS 或者 加载后图片CSS $(‘#css’).dload({ ‘click’:true, ‘holderImg’:’../panel/iwait.gif’, //设置等待时显示的图片 ‘holderCss’:{‘width’:’100px’,'height’:’100px’}, //临时DIV的样式 ‘imageCss’:{‘width’:’100px’, ‘height’:’100px’} //最终图片的样式 });
| |
图片加载失败/成功/完成;
| 代码如下 | 复制代码 |
$(‘#object’).dload({ ‘click’ : true, ‘error’ : function(){ alert( ‘error’ ) }, ‘success’ : function(){ alert( ‘success’ ) }, ‘complete’ : function(){ alert( ‘complete’ ) } })
| |
其他形式:
| 代码如下 | 复制代码 |
//因为hide 会隐藏 那么jQuery 将不会寻找到对象 所以必须用变量将其存储; var dload = $(‘#load’); DLoad().hide( dload ); setTimeout(function(){ DLoad().load( dload ); }, 1000 );
| |
图片加载包含scroll 滚动到图片才加载,click 点击后才加载,timer 时间到了才加载 如果要用 ‘或’即如果我滚动 或则 CLICK 也会加载图片 那么可以这样写
| 代码如下 | 复制代码 |
//3秒不按则自动加载 $(‘#combination_1′).dload({ ‘click’ : true, ‘timer’ : true, ‘delayTime’:3000 });
//3秒不移动到window则自动加载; $(‘#combination_2′).dload({ ‘scroll’ : true, ‘timer’ : true, ‘delayTime’:3000 });
| |
可以自己扩展方法:
//添加方法时注意不用要使用内置load方法即:this.load();
//因为里面load方法里调用新方法 则 造成无限循环;
| 代码如下 | 复制代码 |
var extend = $(‘#extend’).dload({ ‘click’ : true, ‘effect’ : ‘myfunc’, ‘extend’ : { ‘myfunc’ : function(){ this.fadeIn(); } } })
//另外可以将自己方法拿出来用; var extend = $(‘#extend’).dload({ ‘extend’ : { ‘myfunc’ : function(){ this.fadeIn(); } } })
extend.myfunc();
| |
扩展自己的触发方法:
| 代码如下 | 复制代码 |
var extende = $(‘#extende’).dload({ ‘mouseover’ : true, ‘extend’ : { ‘mouseover’ : function(){ var tar = this.getTarget(); var obj = this.getHolder(); obj.bind( ‘mouseover’,function(){ extende.load(); }) } } })
| |
此外 触发方法可以为对象 等 不一定要为true
| 代码如下 | 复制代码 |
$(‘#click’).dload({ ‘click’:{ ‘target’ : $(‘click’), ‘callback’ : function(){ alert( 123 ); } } });
var extende = $(‘#extende’).dload({ ‘mouseover’ : $(‘#extende’), ‘extend’ : { ‘mouseover’ : function( tar ){ var obj = this.getHolder(); obj.bind( ‘mouseover’,function(){ extende.load(); }) } } })
| |
DLoad里面所有方法均可以外接调用;如有不明白可以留言给QQ:307853201
思路:
图片延迟加载必须 不填写图片的SRC地址 如果填写了 再改变src为空 浏览器也会自动加载图片;
图片隐藏: 因为图片不隐藏 在IE上会有交叉符号 同时 我也想找个 临时图片之类 先顶替 保证样式美好;
图片隐藏 我用DIV 将其替代 因为如果用图片 那么小型 临时图片 会自动放大 如果为原大小 则难以定位;
所以用DIV的背景替代用IMG 替换;
为什么不能用IMG 的背景 来做临时 图片呢? 因为IMG 如果为临时图片是可以的 但必须把IMG 的图片指向一个空白图片 否则会 出现交叉; 再者 如果要用JQUERY 中的fadeIn等效果 则要把IMG 与原IMG 分开 唧:无论如何 都必须有两个IMG 那么这么麻烦 还不如直接用DIV替换;
话题作者
头衔:无
活跃成员
