网页图片延时加载

当你看到网页上有很多图片，会不会感觉加载速度超慢，甚至有砸电脑的冲动？其实，我们可以优先加载肉眼能够看到的图片，当用户拖动滚动条时，再加载其余图片。博主受他人启发，写了个jQuery脚本，可以实现网页图片的延时加载，即优先加载用户当前可见的图片。

<script type=”text/javascript”>
jQuery(document).ready(function(){
var body = jQuery(‘body’);
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = jQuery(window).height();
//获取当前窗口的可见宽度
var windowWidth = jQuery(window).width();
body.find(‘img’).each(function(){
//获取图片的src属性
src = jQuery(this).attr(‘src’);
//替换图片src属性为src2属性，并移除src属性
jQuery(this).attr(‘src2′,src).removeAttr(‘src’);
//获取图片的绝对位置
offset = jQuery(this).offset();
if(offset.left >= jQuery(window).scrollLeft() && offset.top >= jQuery(window).scrollTop() && offset.left <= (jQuery(window).scrollLeft() + windowWidth) && offset.top <= (jQuery(window).scrollTop() + windowHeigth)){
jQuery(this).attr(‘src’,src).removeAttr(‘src2′).attr(‘alt’,’图片已加载！’);
}
});
});
jQuery(window).on(‘scroll’,function(){
var body = jQuery(‘body’);
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = jQuery(window).height();
//获取当前窗口的可见宽度
var windowWidth = jQuery(window).width();
body.find(‘img’).each(function(){
//获取图片的src2属性
src2 = jQuery(this).attr(‘src2′);
if(src2){
//获取图片的绝对位置
offset = jQuery(this).offset();
if(offset.left >= jQuery(window).scrollLeft() && offset.top >= jQuery(window).scrollTop() && offset.left <= (jQuery(window).scrollLeft() + windowWidth) && offset.top <= (jQuery(window).scrollTop() + windowHeigth)){
jQuery(this).attr(‘src’,src2).removeAttr(‘src2′).attr(‘alt’,’图片已加载！’);
}
}
});
});
</script>