当你看到网页上有很多图片,会不会感觉加载速度超慢,甚至有砸电脑的冲动?其实,我们可以优先加载肉眼能够看到的图片,当用户拖动滚动条时,再加载其余图片。博主受他人启发,写了个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>