懒加载——网页图片的加载技术

目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时,均采用一种称为懒加载的方式。具体表现为:当页面被请求时,只加载可视区域的图片,其他部分图片则不加载,只有这些图片出现在可视区域的时候,才会动态进行加载这些图片,从而节约了带宽、提高了初次加载的速度。具体实现方式如下:

首先,在页面准备一个div为div1的div,在这个div中放一个ul,lu中准备一些li,这些li都有一个data-src属性,准备着图片的地址,具体结构如下:

    <div id="div1">
         <ul>
            <li data-src="http://t03.pic.sogou.com/7620cd6e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/2c67d8e270eb61c3.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/9c9d058c0c731087.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/007da8d5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/64d939a5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/b0e3d909c131e9cb.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/27e362d461029a95.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/ddfb62d6f09be522_i.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/9448c50e46a53e65.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/b7e5a7e50fdad689.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3825466e4e3b9ce4.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/1d7d602e740c3c50.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/085ea3d5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/ad61be7270eb61c3.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/ed7705b270eb61c3.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/491c4cb461029a95.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/e603c6ae4e3b9ce4.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/6b6a148cdc19fbb4.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/c301bac9f514c378.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/11a6ce8e4e3b9ce4.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/41b26435456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/adb811acdc19fbb4.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/fbb08be9c131e9cb.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/b2ecd2ce4e3b9ce4.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/e655c4fe49cac8ea.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/5251ca4e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/7fe86f66ce211acb.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/541569b5df134ca6.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/d34a3f0e46a53e65.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/78bca85270eb61c3.jpg"></li>
        </ul>
    </div>

图片的动态加载就是通过读取li元素,然后获得li元素的data-src属性的值赋予动态创建的图片的src,从而实现图片的创建。

function setImg(index){
    var oDiv = document.getElementByTd("div1");
    var oUl = oDiv.children[0] ;
    var oLis = oUl.children ;
    //html5新特性
    if(oLis[index].dataset){
        var src = oLis[index].dataset.src ;
    }else{
        var src = oLis[index].getAttribute("data-src");
    }
    
    var oImg = document.createElement("img");
    oImg.src = src ;
    if(oLis[index].children.length == 0){
        oLis[index].appendChild(oImg);
    }
}

那么,怎么识别是否在可视区域呢?这里需要一个函数,能够实现获取当前元素距离网页顶部的距离:

//获取对象距离页面顶部的距离
function getH(obj){
    var h = 0;
    while(obj){
        h += obj.offsetTop ;
        obj = obj.offsetParent ;
    }
    return h ;
}

当网页滚动条滚动的时候要时时判断当前li的位置:

window.onscroll = function(){
    var oDiv = document.getElementByTd("div1");
    var oUl = oDiv.children[0] ;
    var oLis = oUl.children ;
    for(var i=0;i<oLis.length;i++){
        var oLi = oLis[i] ;
        //检查oLi是否在可视区域
        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop); 
        var h = getH(oLi);
        if(h<t){
            setTimeout("setImg("+i+")",500);
        } 
    }
}

当页面加载完成以后要主动运行一下window.onscroll,从而获得当前可视范围内的图片。

window.onload = function(){
    window.onscroll();
}

另外,像这样的页面,障眼法和美化都是必须的,不如:给每个li一个loading的图片作为背景,从而实现了当前图片正在进行的加载的效果,美化工作就是做好合理的布局。

* {
    margin;0;
    padding:0;
}
#div1 {
    width: 520px;
    margin: 30px auto;
    border: 1px solid red;
    overflow: hidden;
}
li {
    width: 160px;
    height: 160px;
    float: left;
    list-style: none;
    margin: 5px;
    background: url(loading.gif) center center no-repeat;
    border: 1px dashed green;
}

至此,一款目前网络盛行的懒加载图片技术即已完成。另外图片源也可以通过ajax的方式进行获得,这里只是提供一种思路,可以自由发挥。。。

时间: 2024-10-19 02:34:42

懒加载——网页图片的加载技术的相关文章

layer iframe加载单个图片或者加载页面

加载单个图片 layer.open({ type: 1, title: false, closeBtn: 0, area: '150px', skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: imgurl }); 加载单个页面 layer.open({ type: 2, title: phone, shadeClose: true, shade: 0.8, area: ['180px', '210px'], content:

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

图片预加载与懒加载

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

ios UIWebView 加载网页、文件、 html

UIWebView  是用来加载加载网页数据的一个框.UIWebView可以用来加载pdf word doc 等等文件 生成webview 有两种方法,1.通过storyboard 拖拽 2.通过alloc init 来初始化 创建webview,下列文本中 _webView.dataDetectorTypes = UIDataDetectorTypeAll; 是识别webview中的类型,例如 当webview中有电话号码,点击号码就能直接打电话 - (UIWebView *)webView

iOS之webview加载网页、文件、html的方法

UIWebView  是用来加载加载网页数据的一个框.UIWebView可以用来加载pdf.word.doc 等等文件 生成webview 有两种方法,1.通过storyboard 拖拽  2.通过alloc init 来初始化 创建webview,下列文本中 _webView.dataDetectorTypes = UIDataDetectorTypeAll; 是识别webview中的类型,例如 当webview中有电话号码,点击号码就能直接打电话 - (UIWebView *)webView

android纹理图片的加载与修改

环境:eclipse,android,opengl es 最近需要对纹理图像进行一些修改,首先需要加载纹理图片,并对纹理图片进行一些修改,最后再进行纹理对象的生成. 一.纹理图片的加载 纹理图片的加载可以通过getResources().openRawResource(int)函数和bitmapFactory类进行加载. InputStream is = mContext.getResources().openRawResource( R.drawable.map_lr_new_n); Bitm

【应对网页图片懒加载】 &#231759;

原文: http://blog.gqylpy.com/gqy/358 图片懒加载概念 ???????图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将会大大增加页面的首屏加载时间.为了解决这个问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏请求数的技术就被成为"图片懒加载". 网站一般如何实现图片懒加载技术呢? ???????在网页源码中,在img标签中首先会使用一个

tableview加载图片的时候的优化之lazy(懒加载)模式and异步加载模式

iOS---tableview加载图片的时候的优化之lazy(懒加载)模式and异步加载模式举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体验就不太好,而且浪费内存.这个时候,我们就可以利用lazy加载技术,当界面滑动或者滑动减速的时候,都不进行图片加载,只有当用户不再滑动并且减速效果停止的时候,才进行加载.刚开始我异步加载图片利用SDWebImage来做

网页前端开发,对于图片慢加载简介

http://www.cnblogs.com/qingseyuandi/p/loadingLater.html 网页前端的图片慢加载给网页显示的成本降低了不少,因此我在这边简单的介绍一下慢加载的一个技术原理,希望能起到抛砖引玉的作用,写的不好的地方希望指正,谢谢~~   技术背景 现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...  技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~