可视区域懒加载

在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结,大家可以看一下,复习一下!

了解了各种高度之后,我们开始我们的js代码吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>haorooms前端博客-可视区域加载之 javascript</title>
    <style>
    img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}

    </style>
</head>
<body>
    <img haoroomslazyload="Chrysanthemum.jpg" src="" >
    <img haoroomslazyload="Desert.jpg" src="" >
    <img haoroomslazyload="Hydrangeas.jpg" src="" >
    <img haoroomslazyload="Koala.jpg" src="" >
    <img haoroomslazyload="Lighthouse.jpg" src="" >
    <img haoroomslazyload="Penguins.jpg" src="" >
    <img haoroomslazyload="Tulips.jpg" src="" >
    <script>
    var imgNum=document.getElementsByTagName(‘img‘).length;
    var imgObj=document.getElementsByTagName("img");
    var l=0;

        window.onscroll=function(){
                var seeHeight = document.documentElement.clientHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                for(var i=l;i<imgNum;i++){
                    if(imgObj[i].offsetTop < seeHeight + scrollTop){
                        console.log(imgObj[i].getAttribute("src"));
                        console.log(imgObj[i].src );
                        if(imgObj[i].getAttribute("src") == ""){
                            imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");
                        }
                    }
                    if(imgObj[i].offsetTop > seeHeight + scrollTop){
                        l=i;
                        break;
                    }
                }
        }

</script>

大家注意看我的两个console输出,console.log(imgObj[i].src );获取的是整个浏览器地址!

jquery懒加载之可视区域加载

上面的js用jquery翻译版!

var l=0
//js方法翻译版
$(window).bind("scroll", function(event){

                for(var i=l;i<$("img").length;i++){
                    if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        if($("img").eq(i).attr("src") == ""){
                            var lazyloadsrc=$(‘img‘).eq(i).attr("haoroomslazyload");
                            $("img").eq(i).attr("src",lazyloadsrc);
                        }
                    }
                    if($("img").eq(i).offset().top  > parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        l=i;
                        break;
                    }
                }

 });

另外一种方法,可以参考我之前写的一个延迟加载的插件:http://www.haorooms.com/post/touchweb_canvas_lazyload

其中是这么写的。

我把这个写法拎了出来,如下:

$(window).bind("scroll", function(event){
$("img").each(function(){
          //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
            var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
                var PictureTop = parseInt($(this).offset().top);
                 if (PictureTop >= thisTop && PictureTop <= thisButtomTop && $(this).attr("haoroomslazyload") != $(this).attr("src")) {
                   $(this).attr("src", $(this).attr("haoroomslazyload"));
                 }
});

})

可视区域加载延伸

例如一个动画效果,或者一个canvas图片,我想达到的效果是,初始进来不加载,当滚动到这个动画或者图表上面的时候,进行加载,那么我们就可以根据上面的代码进行如下改进:

$(window).bind("scroll", function(event){

          //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
            var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
                var PictureTop = parseInt($("你的要滚动加载的ID").offset().top);
                 if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
                  //  $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload")); 

                   //此处可以执行你的加载函数,加载函数由原来的document.ready中,移到这里来!

                 }
})
时间: 2024-10-01 06:07:43

可视区域懒加载的相关文章

js可视区域图片懒加载

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

js图片懒加载

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

js 图片懒加载

图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js"></script> 初始化 Lazy.init(1000); 可以传入延时时间.默认是500ms 注意: <img src="img/load.gif" data-lazy="img/2.jpg"> src 属性放预加载的图片,data-

原生js实现图片懒加载原理

背景:页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽.为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能. 1.懒加载原理一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的src属性,所以实现懒加载的关键就是: 在图片没有进入可视区域时,先不给

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

参考文章: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或set

深入懒加载

[javascript] view plain copy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属

页面图片懒加载

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

图片懒加载

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

js效果笔记:怎样实现图片的懒加载以及jquery.lazyload.js的使用

在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件. 一:jquery.lazyload.js插件 lazyload是jQuery写的延迟加载插件,在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 实现原理 首