js实现图片延迟加载

/*
* 思路：
* 1.获取可视窗口高（clientHeight）、各个图片的绝对距离（getPub函数）以及滚动进去的高（scrollTop)
* 2.滚动进去的高（scrollTop) + 视窗口高（clientHeight）>=各个图片的绝对距离
* 3.若满足第2步的条件，就让自定义属性的内容 赋值给img的src属性；
* *//*获取当前元素到html的距离*/
function getPub(obj){var a =0;var b = 0;while (obj){a+=obj.offsetLeft;b+=obj.offsetTop;obj=obj.offsetParent;}return {'left':a,'top':b};
}
window.onload =window.οnscrοll= function () {var aImage = document.getElementsByTagName('img');var cHeight = document.documentElement.clientHeight;var sHeight = document.documentElement.scrollTop;for (var i = 0;i<aImage.length;i++){if(cHeight+sHeight>=getPub(aImage[i]).top){//2aImage[i].src=aImage[i].getAttribute('_src');//3}}}

js实现图片延迟加载相关推荐

基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
JS实现图片延迟加载（图片懒加载）
1.为什么需要做图片的懒加载 =>第一次加载页面的时候,如果请求真实图片资源,会减缓页面的渲染速度,为了提高首次打开的体验度,我们最开始不加载真实的图片资源(比如大小很小的背景图片 ...
JS 实现图片延迟加载（懒加载）
实现原理结构中,我们使用一个盒子包裹着图片(图片不显示的时候,可以先占据着这个位置,并且设置默认背景图或背景颜色) 最开始,img 的 src 设置默认背景图,并把图片真实地址放到自定义属性中(比如 ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效. ...
jquery图片延迟加载 lazy-src
http://tanglangrong2010.blog.163.com/blog/static/174796716201211282555345/ 目前,主要的购物网站都采用了这种加载方式.今天在一 ...
ImagesLazyLoad 图片延迟加载效果
之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了解决这个问题,就想到了Lazyload效果. 现在很多网站都用 ...

js实现图片延迟加载

js实现图片延迟加载相关推荐

最新文章

热门文章