本文描述了原Javaｓｃｒｉｐｔ的延时加载方法，图片延迟加载实际上是一个jQuery插件，加载方法简单合理，但有些朋友认为加载jQuery插件包太大了。在此期间，我写了一份自我与大家分享。

首先，图片延迟加载可以节省我们的带宽，并获得更好的用户体验，特别是对于许多图片。这是非常重要的。这里我们将讨论图片延迟加载的原理和实现代码。

图像延迟加载原理

图片是在画面内Src填补HTML延迟加载的原则是不是真正的图片地址，而是以一种自定义属性指定的img标签，图片地址如：IMG SRC = / loading.gif数据URL = IMG / 1.jpg，然后通过js浏览器检测滚动事件，达到内心深处的画面时，自定义属性赋给当前IMG SRC标签的真实地址，以实现动态显示图片。在实际项目中，这些图片的地址可以通过Ajax和分配到IMG的自定义属性。

图像延迟加载实例的本地js实现：

文本内容似乎很枯燥。我写了一个简单的演示。现在，我想把所有的代码都粘贴出来，需要它的朋友可以直接拷贝过去。

复制代码代码如下所示：







图片延迟加载



img {显示：块；宽度：350px；身高：245px；背景：URL（IMG /加载GIF）中心不重复}





























































var obj = document.getelementbyid（div）。GetElementsByTagName（IMG），

H = window.innerheight document.documentelement.clientheight | |；

对于（var i = 0；i < obj.length；i++）{

obj {我}，{我} URL = obj对象（数据链接）；

obj {我}，{我}最高目标。offsettop；

obj {我}。旗= true； / /防止浏览器被载入图片，这张图片加载成功，滚动时，浏览器将不会加载图片；

}

无功fnload =功能（obj）{

var t = document.body.scrolltop document.documentelement.scrolltop | |；

如果（T + H > OBJ。顶+ 200obj。顶> T）{ / / 200允许用户为了提高加载状态看图片，更友好

setTimeout（）{（）函数（

SRC = obj.url OBJ；

obj。旗=假；

}，500）

}

}

window.onscroll =窗口。指针函数（）{

对于（var i = 0；i < obj.length；i++）{

如果（obj {我}，{标志）

FnLoad（obj {我}）；

}

}

}







希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。