canvas移动端常用技巧图片loading
技巧 常用 图片 移动 Canvas loading
2023-09-27 14:27:24 时间
核心知识点:drawImage
作用:将图片加载在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; } }) } }
相关文章
- iOS 保持界面流畅的技巧
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- IAR常用快捷键及技巧
- vue开发常用技巧总结(一)
- 【BZOJ】1064: [Noi2008]假面舞会(判环+gcd+特殊的技巧)
- shell在一个大文件找出想要的一段字符串操作技巧
- LoadRunner技巧之协议分析
- B.图算法:图神经网络图学习项目合集&数据集分享&技术归纳业务落地技巧[系列十]
- 26个你不知道的Python技巧
- JavaScript常用的简洁高级技巧
- 数据库设计中的13个技巧
- 最小化 Java 镜像的常用技巧
- 常用前端布局,CSS技巧介绍
- CSS技巧
- Hive常用优化技巧
- Processing一些常用技巧
- 【Debug】 你所不知道的各种前端Debug技巧系列Network - Overview & Settings---第15天
- 自己工作中常用的前端技巧分享下
- Linux之实用GDB技巧
- 总结js常用函数和常用技巧(持续更新)
- CSS 常用技巧