图片延迟加载(lazyload)的实现原理

此前在浏览一些网站的时候,发现他们网站的图片都是你“鼠标”滚到哪,图片才会加载显示。当时觉得好神奇,怎么会这么“跟手”呢。

在学习JS和jQuery后,自己尝试写了能够实现lazyload的方法。

核心原理是:

1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视口(也就是浏览器中的展现网站的空白部分)中;

2 为<img>标签设置一个暂存图片URL的自定义属性(例如loadpic),当图片出现在视口时,再将loadpic的值赋给图片的src属性;

最后,贴出分别用原生js和jQuery实现该功能的实现方法:

1 原生JavaScript的实现方法

<script>
    var imgs = document.getElementsByTagName(‘img‘);
    // 获取视口高度与滚动条的偏移量
    function lazyload(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        for(var i=0; i<imgs.length; i++) {
            var x =scrollTop+viewportSize-imgs[i].offsetTop;
            if(x>0){
                imgs[i].src = imgs[i].getAttribute(‘loadpic‘);
            }
        }
    }

    setInterval(lazyload,1000);
</script>

2 jQuery的实现方法

/**
* 图片的src实现原理
*/
$(document).ready(function(){
    // 获取页面视口高度
    var viewportHeight = $(window).height();
    var lazyload = function() {
        // 获取窗口滚动条距离
        var scrollTop = $(window).scrollTop();
        $(‘img‘).each(function(){
        // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度
        var x = scrollTop + viewportHeight - $(this).position().top;
        // 如果大于0 即该元素能被浏览者看到,则将暂存于自定义属性loadpic的值赋值给真正的src
        if (x > 0)
        {
            $(this).attr(‘src‘,$(this).attr(‘loadpic‘));
        }
    })
    }
    // 创建定时器 “实时”计算每个元素的src是否应该被赋值
    setInterval(lazyload,100);
});

当然,上述代码还是很简陋,仅仅说了实现的原理,生产环境推荐使用:jquery_lazyload

时间: 2024-11-05 22:06:03

图片延迟加载(lazyload)的实现原理的相关文章

jQuery图片延迟加载插件:jquery.lazyload

----------------------------------------------------------------------------------------------- class='lazy' 载入样式,data-original指向图片地址 底部引入jQuery和jQuery.lazyload.js <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="76

jquery.lazyload.js 图片延迟加载

当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定): <script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min"></script> &l

Lazyload延迟加载效果和图片延迟加载

http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html   网页延迟加载   http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html  图片延迟加载

jQuery图片延迟加载插件jQuery.lazyload

查看演示 website 立即下载 插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"&g

jquery.lazyload 实现图片延迟加载jquery插件

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用J

jQuery与lazyload.js图片延迟加载

一.简介: 在html中请求图片是最大的一处难题,图片的大小给我们的服务器带来了很大的压力,造成了请求时间过长.图片难以加载出来.jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度. 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载.对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 官网:https://appelsiini.net/projects/lazyload/ 帮助:http://code.ciao

lazyload 图片延迟加载

使用方法 引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> html图片调用方法 为图片加入样式lazy  图片路径引用方法用data-original <img class="lazy"

jQuery图片延迟加载插件jQuery.lazyload 的使用

使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> html图片调用方法 为图片加入样式lazy  图片路径引用方法用data-original 1 2 3 4 5 6 <img class=

对搜索引擎友好的图片延迟加载技术

先写一个思路,以后再贴代码. 在大数据时代,网站内容越来越丰富,图片数量越来越多,质量也越来越高.这意味着更加耗用带宽.流量. 如果一个页面有100张高清图片,比如游记,在不考虑延迟加载情况下,浏览器会在极短的时间内向服务器发起100个图片下载请求,但实际上用户并不需要短时间内看完100张图片,甚至用户有可能只看前面几张图片,那么这时不管对服务器来说还是对网络来说,还是对用户机器来说都会高负荷的运转起来,将极大的浪费资源. 因此,按需加载.延迟加载才能提供好的用户体验. 那么,延迟加载具体是怎样

jQuery图片延迟加载插件

在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量. 使用图片延时加载插件就解决这些问题. 方法: 引入jquery和插件文件 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></sc