js和jquery懶加載之可視區域加載

時間 2019-11-07

原文原文鏈接

在製做js可視區域加載以前，咱們首先必須瞭解各類高度，我以前的一篇文章javascript的height總結，你們能夠看一下，複習一下！javascript

瞭解了各類高度以後，咱們開始咱們的js代碼吧！html

<!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翻譯版！java

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_lazyloadjquery

其中是這麼寫的。web

我把這個寫法拎了出來，以下：canvas

$(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中，移到這裏來！



                 }
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。