canvas移动端常用技巧图片loading
2015-08-09 09:40
309 查看
核心知识点:drawImage
作用:将图片加载在canvas
html:
js:
移动端图片loading实例
需求:需要给一个列表中的图片添加加载效果
html
重点css
js
作用:将图片加载在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
var imglength = $("#productul").find("canvas").length; if (imglength > 0) { $("#productul").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; } }) } }
相关文章推荐
- android上传图片文件至C#服务器
- 微信公众号平台之自定义菜单开发
- Android Studio添加插件(Genymotion)
- iOS设计模式之简单工厂模式
- 解决VS2015安装Android SDK 后文件不全及更新问题
- uva 1161 Objective: Berlin (最大流)
- Android技能树
- iOS Objective-C 身份证号码校验
- Android Api Demos登顶之路(二十五)Wallpaper
- Android Api Demos登顶之路(二十四)Translucent Activity
- 安卓V4、V7等源码绑定
- iOS错误 - too many open files (error = 24)
- JSP的内置对象(三)appliaction、page、pageContext、config、Exception
- cordova完全退出应用程序
- Android性能优化典范(二)
- 教你提前体验iOS9 iOS9公开测试版升级教程
- iOS 开发:用 Instruments 来检验你的app
- 我的BIOS之行(3)-遍历pci设备(2)mmio访问
- iOS程序内打开和发送邮件
- Spring MVC4 @RequestMapping