用canvas實現圖片的懶加載並且下滑到據底部60px的時候再次加載數據，模仿UC瀏覽器的新聞加載。

　　完整代碼：https://github.com/dirkhe1051931999/writeBlog/tree/master/canvasloadimg

　　html結構

<section class="productul" id="productul">
        <input type="hidden" id="pagenumlength" value="1">
            <ul id="scrollAdd">
                <
 
li>
                <a href="#">
                    <div class="leftimage fl">
                         <canvas data-src="./product1.png"></canvas>
                    </div>
                    <div class="productcontent fr">
                        <p 
 
class="ptitle ">這是標題</p>
                        <p class="pdes ">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</p>
                        <p class="pprice ">這是註釋</p>    
                    </div>
                </a>
                </li>
                <li>
 

                <a href="#">
                    <div class="leftimage fl">
                         <canvas data-src="./product1.png"></canvas>
                    </div>
                    <div class="productcontent fr">
                        <p class="ptitle ">這是標題</p>
                        <p class="pdes ">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</p>
                        <p class="pprice ">這是註釋</p>    
                    </div>
                </a>
                </li>
                <li>
                <a href="#">
                    <div class="leftimage fl">
                         <canvas data-src="./product1.png"></canvas>
                    </div>
                    <div class="productcontent fr">
                        <p class="ptitle ">這是標題</p>
                        <p class="pdes ">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</p>
                        <p class="pprice ">這是註釋</p>    
                    </div>
                </a>
                </li>
            </ul>
            <div class="loaddiv"></div>
        </section>

　　方法

var ajaxState = true,
    pageSize = 5,
    currentpage =1;
//  canvas懶加載
function loadCanvas () {
    var imglength = $("#productul").find("canvas").length;
    if (imglength>0) {
        $("#productul").find("canvas").each(function(){
            var imgSrc=$(this).data("src");
            var imageObj = new Image();
            // 當前獲取的canvas
            imageObj.canvs = $(this)[0];
            var cvs = imageObj.canvs.getContext("2d");
            if (cvs) {
                imageObj.onload = function(){
                    imageObj.canvs.width = this.width;
                    imageObj.canvs.height = this.height;
                    cvs.drawImage(this,0,0);
                    // 繪制成功後 把loading取消
                    $(imageObj.canvs).css("background-image","none");
                }
                imageObj.src=imgSrc;
            }
        })
    }
}
// ajax請求數據(模擬了一個接口)
function getData(pagenumber){
    $.ajax({
        type:"get",
        url:"./test.json",
        data:{
            page:pagenumber,
            row:pageSize,
        },
        dataType:"json",
        success:function(result){
            $(".loaddiv").hide();
            if (result.length>0) {
                // 數據加載成功，設置標誌位
                ajaxState=true;
                insertDiv(result);
                loadCanvas();
            }else{
                // 沒有數據，不執行，設置標誌位
                $("#pagenumberlength").val("0");
            }
        },
        beforeSend:function(){
            $(".loaddiv").show();
        },
        error:function(){
            $(".loaddiv").hide();
        }
    })
}
// dom 插入
function insertDiv(json){
    var $mainDiv = $("#scrollAdd");
    var html = "";
    var showlength =5;
    if (json.length<5) {
        showlength = json.length;
    }
    for(var i=0;i<showlength;i++){
        html += ‘<li><a href="#">‘+
            ‘<div class="leftimage fl"><canvas data-src="./product1.png" ></canvas></div>‘+
             ‘<div class="productcontent fr">‘+
                 ‘<p class="ptitle ">這是標題</p>‘+
                  ‘<p class="pdes ">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</p>‘+
                  ‘<p class="pprice ">這是註釋</p>‘+
            ‘</div></a></li>‘;
    }
    $mainDiv.append(html);
}
// 據底部60判斷
function scrollHandler(){
    // console.log(parseInt(scrollT)+parseInt(winHeight)+50>=parseInt(pageH) && ajaxState)
    
    var pageH = $(document).height();
    // 滾動條的top
    var scrollT = $(window).scrollTop();
    var winHeight = $(window).height();
    if (parseInt(scrollT)+parseInt(winHeight)+60>=parseInt(pageH) && ajaxState){
        if ($("#pagenumlength").val()=="1") {
            // 滾動到底部，設置標誌位
            ajaxState =false;
            currentpage++;
            getData(currentpage);
        }else{
            return;
        }
    }
}

　　執行代碼

    $(function(){
        loadCanvas();
        $(window).scroll(scrollHandler);
        $("#productul").on("touchmove",scrollHandler);
    })

　　註意：$(document).height() = $(window).height() + $(window).scrollTop()

　　　　　 其中$(document).height()是網頁高度， $(window).height()是可視窗口高度，$(window).scrollTop()是可視窗口距頂端高度

學習 | canvas實現圖片懶加載 && 下滑底部加載