jQuery插件DLoad实现延迟加载图片详解

来源:互联网 时间:1970-01-01

本文章给各位介绍一个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替换;


相关阅读:
Top