用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()是可视窗口距顶端高度