canvas移动端常用技巧图片loading

 

将图片加载在canvas

html:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

js:

复制代码
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>
复制代码

移动端图片loading实例

需求：需要给一个列表中的图片添加加载效果

html

复制代码
<section class="productul" id="productul">
     <ul>
         <li>
            <a href="#">
             <div class="triangle-topleft"></div>
             <span class="shuxing" data_url="productinfo.html">专属</span>
             <div class="leftimages fl"><canvas data-src="images/product/product1.png" ></canvas></div>
             <div class="productcontent fr">
                 <p class="ptitle pl10">标题</p>
                  <p class="pdes pl10">简介这里简介这里简介这里简介这里简介这里简介这里简介这里简介介这里简介</p>
                  <p class="pprice pl10">价格：<span class="green">￥5000</span></p>
             </div>
           </a>
         </li>
     </ul>    
</section>
复制代码

重点css

img{width:100px;birder:0;}
canvas{width:100px;min-height:100px;background:#fff url("../images/loading.gif") center center no-repeat; background-size:15px auto; }

js

复制代码

            //通过id，获取页面中所有的canvas标签

           var imglength = $("#productul").find("canvas").length;

            if (imglength > 0) {

                //each遍历，获取加载图片地址

                $("#productul").find("canvas").each(function () {

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

                    var imageObj = new Image();

                    //imageObj.canvs=当前图片对象

                    imageObj.canvs = $(this)[0];

                    //绘制到2d平面

                    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;  //图片路径

                    }

                })

            }

    　　}

        

 

 

posted @ 2017-05-27 10:25  轻轻走143  阅读(431)  评论(0)    收藏  举报