图片的延迟加载

本文深入解析图片延迟加载的原理,通过自定义属性和占位图片实现高效加载,同时提供JavaScript插件代码,演示如何在不同场景下灵活应用。重点强调优化用户体验和资源加载效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活、不露面。 
<img src="images/placeholder.png" lazy-src="images/realimg.jpg" alt="" />
<!-- 如果浏览器禁用了js,我们也不能不让网页显示图片撒,所以最好是加上下面一句备用代码 -->
<noscript><img src="images/realimg.jpg" alt="" /></noscript> 首先。页面开始加载时浏览器会获取所有图片在当前页面中的位置并缓存(获取offset的值时,页面的reflow会被引发),计算出可视区域,当图片的位置出现在可视区域中,利用js动态地将图片标签中的src值替换成图片真实的地址,这时,刚刚出现在可视区域的图片便开始加载。

其次。当用户向下滚动页面时,通过js再次计算是否有图片初次出现可视区域内,如果有,刚对这些图片的src值进行替换,并开始加载真实图片。为了避免重复操作引起的内存泄漏,需要在全部图片加载完后,卸载掉相应的触发事件。 
 
最后。本文是将整个窗口看成是一个大容器,如果愿意,也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。原理虽然简单,但是应用是多样的。

从下面的地址可以看到图片延迟加载的演示,不过尽量使用相应的工具(firebug、Fiddler2)监测图片延迟加载的效果。 
图片延迟加载插件的代码如下: 
图片延迟加载插件代码:

(function( $ ){
$.fn.imglazyload = function( options ){
var o = $.extend({
attr : 'lazy-src',
container : window,
event : 'scroll',
fadeIn : false,
threshold : 0,
vertical : true
}, options ),
event = o.event,
vertical = o.vertical,
container = $( o.container ),
threshold = o.threshold,
// 将jQuery对象转换成DOM数组便于操作
elems = $.makeArray( $(this) ),
dataName = 'imglazyload_offset',
OFFSET = vertical ? 'top' : 'left',
SCROLL = vertical ? 'scrollTop' : 'scrollLeft',
winSize = vertical ? container.height() : container.width(),
scrollCoord = container[ SCROLL ](),
docSize = winSize + scrollCoord;
// 延迟加载的触发器
var trigger = {
init : function( coord ){
return coord >= scrollCoord &&
coord <= ( docSize + threshold );
},
scroll : function( coord ){
var scrollCoord = container[ SCROLL ]();
return coord >= scrollCoord &&
coord <= ( winSize + scrollCoord + threshold );
},
resize : function( coord ){
var scrollCoord = container[ SCROLL ](),
winSize = vertical ?
container.height() :
container.width();
return coord >= scrollCoord &&
coord <= ( winSize + scrollCoord + threshold );
}
};
var loader = function( triggerElem, event ){
var i = 0,
isCustom = false,
isTrigger, coord, elem, $elem, lazySrc;
// 自定义事件只要触发即可,无需再判断
if( event ){
if( event !== 'scroll' && event !== 'resize' ){
isCustom = true;
}
}
else{
event = 'init';
}
for( ; i < elems.length; i++ ){
isTrigger = false;
elem = elems[i];
$elem = $( elem );
lazySrc = $elem.attr( o.attr );
if( !lazySrc || elem.src === lazySrc ){
continue;
}
// 先从缓存获取offset值,缓存中没有才获取计算值,
// 将计算值缓存,避免重复获取引起的reflow
coord = $elem.data( dataName );
if( coord === undefined ){
coord = $elem.offset()[ OFFSET ];
$elem.data( dataName, coord );
}
isTrigger = isCustom || trigger[ event ]( coord );
if( isTrigger ){
// 加载图片
elem.src = lazySrc;
if( o.fadeIn ){
$elem.hide().fadeIn();
}
// 移除缓存
$elem.removeData( dataName );
// 从DOM数组中移除该DOM
elems.splice( i--, 1 );
}
}
// 所有的图片加载完后卸载触发事件
if( !elems.length ){
if( triggerElem ){
triggerElem.unbind( event, fire );
}
else{
container.unbind( o.event, fire );
}
$( window ).unbind( 'resize', fire );
elems = null;
}
};
var fire = function( e ){
loader( $(this), e.type );
};
// 绑定事件
container = event === 'scroll' ? container : $( this );
container.bind( event, fire );
$( window ).bind( 'resize', fire );
// 初始化
loader();
return this;
};
})( jQuery ); 



有关这个的插件API说明如下:

attr string 
存放图片真实地址的属性名,与HTML对应,默认是lazy-src。 
 
container dom & selector 
默认的容器为window,可自定义容器。

event stirng 
触发图片加载的事件类型,默认为window.onscroll事件 。

fadeIn boolean 
是否使用jQuery的fadeIn效果来显示,默认是false。

threshold number 
页面滚动到离图片还有指定距离的时候就进行加载,默认是0。 
vertical boolean 
是否横向滚动,默认为true(纵向)。

loadScript(增强版的功能) boolean 
是否无阻塞加载javascript广告图片,默认为false。

内容概要:本文档详细介绍了基于MATLAB实现多目标差分进化(MODE)算法进行无人机三维路径规划的项目实例。项目旨在提升无人机在复杂三维环境中路径规划的精度、实时性、多目标协调处理能力、障碍物避让能力和路径平滑性。通过引入多目标差分进化算法,项目解决了传统路径规划算法在动态环境和多目标优化中的不足,实现了路径长度、飞行安全距离、能耗等多个目标的协调优化。文档涵盖了环境建模、路径编码、多目标优化策略、障碍物检测与避让、路径平滑处理等关键技术模块,并提供了部分MATLAB代码示例。 适合人群:具备一定编程基础,对无人机路径规划和多目标优化算法感兴趣的科研人员、工程师和研究生。 使用场景及目标:①适用于无人机在军事侦察、环境监测、灾害救援、物流运输、城市管理等领域的三维路径规划;②通过多目标差分进化算法,优化路径长度、飞行安全距离、能耗等多目标,提升无人机任务执行效率和安全性;③解决动态环境变化、实时路径调整和复杂障碍物避让等问题。 其他说明:项目采用模块化设计,便于集成不同的优化目标和动态环境因素,支持后续算法升级与功能扩展。通过系统实现和仿真实验验证,项目不仅提升了理论研究的实用价值,还为无人机智能自主飞行提供了技术基础。文档提供了详细的代码示例,有助于读者深入理解和实践该项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值