Canvas 图片加载

canvas方法加载图片，占用内存最小，效果最佳。

 

关于canvas加载，我的方法是，将文章中所有用到图片的地方，都用canvas代替，给canvas一个data-src，里面存放img的路径，通过canvas方法渲染图片。因为图片渲染需要时间，一般会给canvas一个背景，背景可以用gif图片。图片渲染好了之后把背景去掉。

 

代码：

<script type="text/javascript">

var canvasload = function () {

//canvas加载图片

var imglength = $(".goods-img-l-wrap").find("canvas").length;

if (imglength > 0) {

$(".goods-img-l-wrap").find("canvas").each(function () {

var imgSrc = $(this).data("src");

var imageObj = new Image();

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);

$(imageObj.canvs).css("background-image", "none");

}

imageObj.src = imgSrc;

}

})

}

}

</script>

<section class="goods-list-wrap">

<!--商品列表-->

<c:if test="${ not empty listMap}">

<c:forEach items="${listMap }" var="listMap">

<div class="goods-div-wrap" οnclick="queryStageProductById(${listMap.id });">

<div class="goods-img-l-wrap" >

<c:forEach items="${listMap.colorImageList }" var="tempColorImageList" begin="0" end="0">

<%-- <img src="${tempColorImageList.image}"/> --%>

<canvas id="myCanvas" data-src="${tempColorImageList.image}" style="width:100%"></canvas>

</c:forEach>

</div>

<div class="goods-msg-r-wrap">

<p>${listMap.name}</p>

<p>总价：￥${listMap.price}</p>

<p>首付：￥${listMap.price*5/100}</p>

<p>月供：<span>￥<em>${listMap.monthPaymentAmount }</em></span>×${listMap.monthPaymentNumber}期</p>

</div>

</div>

</c:forEach>

</c:if>

</section>

<script type="text/javascript">

canvasload();

</script>