(可视区域加载)图片懒加载实现原理

参考文章:http://www.cnblogs.com/xiaohuochai/p/4859485.html

http://www.cnblogs.com/xiaohuochai/p/4859899.html

http://www.cnblogs.com/vajoy/p/4263291.html

定义

  图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。

呈现形式

【1】延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载。
【2】条件加载,符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上,不会有太长时间的停顿。

基本步骤

【1】网页中的图片都设为同一张图片
【2】给图片增加data-original = "img/test.jpg"的属性,保存图片的真实地址
【3】当触发某些条件时,自动改变该区域的图片的src属性为真实的地址

应用

【点击按钮显示图片】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    height: 100px;
    width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="#" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName(‘button‘)[0];
var oImg = document.images[0];
oBtn.onclick = function(){
    oImg.src = "img/loading.gif";
    if(oImg.dataset){
        aftLoadImg(oImg,oImg.dataset.original);
    }else{
        aftLoadImg(oImg,oImg.getAttribute("data-original"));
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}
</script>
</body>
</html>

【可视区显示图片】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 400px;
    width: 400px;
    float: left;
}
.in img{
    height: 400px;
    width: 400px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
</ul>

<script>
var oBtn = document.getElementsByTagName(‘button‘)[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
    loadImg(aImages);
};
function loadImg(arr){
    for( var i = 0,len = arr.length; i < len; i++){
        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ‘‘; opacity: 0;"
            if(arr[i].dataset){
                aftLoadImg(arr[i],arr[i].dataset.original);
            }else{
                aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
            }
            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"
                },16)
            })(i);
        }
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}

</script>
</body>
</html>

【效果展示】

时间: 2025-01-02 13:42:50

(可视区域加载)图片懒加载实现原理的相关文章

js可视区域图片懒加载

可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery可视区域图片懒加载</title> <script src="http://libs.baidu.com/jquery/2

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

图片懒加载

一.什么是图片滚动加载? 通俗的将就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有在图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来.这就是图片懒加载. 二.为什么要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了.更为要命的是:一上来就发送百八十个请求

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

js图片懒加载

<script type="text/javascript"> var lazyLoad = { // 获取元素到页面顶部的距离 getoffsetTop: function(elem){ var offTop = 0; while(elem != null){ offTop += elem.offsetTop; // 获取元素到其上一级元素顶部的距离 elem = elem.offsetParent; // 元素的上一级元素 } return offTop; }, //

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览

图片懒加载--lazyload.js的用法

这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么解决这个问题呢?jQuery插件库中有个插件lazyload.js可以实现图片懒加载. lazyload.js的原理就是将真正要加载的图片的地址放在另一个属性中,而图片的src的地址则是一个1px *1px的占位图,这样在网页加载过程中,首先下载的是这个占位图,当网页加载完成后,下拉页面时再下载在可

实现图片懒加载

Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片. 一个简单的图片懒加载共涉及两个方面, 1. HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性.具体示例为: <

图片懒加载 lazyload.js使用方法

lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min