本地Javaｓｃｒｉｐｔ的图像滚动和延迟加载功能

实现效果：当滚动条被拉下时，当它出现在可见区域时，图片开始加载。

思想:

(1) img tag, put the real picture address in its own set of attributes, such as lazy-src

（2）从页面获取IMG的高度（在JQ偏移（）。顶部），和原来的是：

Img.getBoundingClientRect（）。顶+文档。身体。scrollTop | | document.documentelement.scrolltop

（3）确定IMG的位置出现在可见光区域：

在浏览器的可见区域，scrolltopoffsettop正通> <（scrollTop + windowheight），这里正通是画面的offsettop +图像高度

复制代码代码如下所示：

在变量中保存文档，将查询减为文档

文档；

对于（VAR n = 0，I = this.oimg.length；n＜我；N + +）{

获取/图片占位符图片。

VaR HSRC =这。oimg {N}。getAttribute（这个。sholder_src）；

If (hSrc) {

VaR scrollTop =医生的身体。scrollTop | | doc.documentelement.scrolltop，

windowheight = doc.documentelement.clientheight，

offsettop =这。oimg { }。getboundingclientrect（）。顶+ scrollTop，

imgheight =这。oimg { }自己，

正通= offsettop + imgheight；

图片在可见区域{判断}

如果（scrolltopoffsettop正通> <（scrollTop + windowheight））{

this.isload（HSRC，N）；

}

}

}
下面是详细的代码：

复制代码代码如下所示：

功能lgy_imgscrollload（选项）{

this.oimg = document.getelementbyid（选项。wrapid）。GetElementsByTagName（'img）；

this.sholder_src = option.holder_src；

This.int（）；

}

lgy_imgscrollload.prototype = { {

LoadImg：函数（）{

在变量中保存文档，将查询减为文档

文档；

对于（VAR n = 0，I = this.oimg.length；n＜我；N + +）{

获取/图片占位符图片。

VaR HSRC =这。oimg {N}。getAttribute（这个。sholder_src）；

如果（HSRC）{

VaR scrollTop =医生的身体。scrollTop | | doc.documentelement.scrolltop，

windowheight = doc.documentelement.clientheight，

offsettop =这。oimg { }。getboundingclientrect（）。顶+ scrollTop，

imgheight =这。oimg { }自己，

正通= offsettop + imgheight；

图片在可见区域{判断}

如果（scrolltopoffsettop正通> <（scrollTop + windowheight））{

/ /警报（offsettop）；

this.isload（HSRC，N）；

}

}

}

}，

isload：功能（SRC，n）{

var，

N＝n，

o_img =新的图像（），

这_that =；

o_img.onload =（功能（N）{）

_that。oimg {N}。setAttribute（'src，SRC）；

_that。oimg { }。removeattribute（_that。sholder_src）；

}（n）；

o_img.src = SRC；

}，

Int：函数（）{

This.loadImg（）；

无功_that =这，

计时器= null；

/ /滚动：添加定时器，调用loadimg功能防止频繁

window.onscroll =函数（）{

ClearTimeout（定时器）；

定时器= setTimeout（）{（）函数（

_that.loadimg（）；

}，100）；

}

}

}
设计素描 uff1a
以上是本文的全部内容，对jQuery插件的实现效果没有区别，代码也简洁，请各位朋友参考一下。