当滚动条条滚动到图片位置再显示图片

技术分享 2019-10-01 00:00:00
二话不说先上代码:
$(function(){
$(window).scroll( function() {
$("img").each(function(i){
if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){
$(this).attr("src",$(this).attr("value"));
}
});
});
});

当滚动条条滚动到图片位置再显示图片,像淘宝,京东等网站都采用了这样的js技术,这样可以是带宽使用减少,也可以增加用户体验。
即:当滚动条滚动时出发检查事件,检查每一个图片位置,当图片距离页面顶部位置小于滚动条加上浏览器高度时,则图片进行显示输出。
解释一下上面的代码,本代码采用jquery弄的,offset().top是获取图片距离顶部高度当小于滚动条滚动距离document.documentElement.scrollTop加上浏览器高度$(window).height()时则进行显示,在这里-200是为了看效果,当图片出来200像素的 时候才进行图片显示
////////////////////////////////////////////
网上有现成的jquery的组建,名字:jquery.lazyload.js 谷歌自己搜吧。
用法:$(function(){
$("img").lazyload({
placeholder : "默认等待图片",
effect : "fadeIn"
});
});
咨询小瓶科技
咨询我们
顶部