核心知识点: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="data: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:;}
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;
}
})
}
}

canvas移动端常用技巧图片loading的更多相关文章

  1. HTML5-移动开发常用技巧与弹性布局的使用

    一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.initial-scale ...

  2. iOS开发--常用技巧 (MJRefresh详解)

         iOS开发--常用技巧 (MJRefresh详解) https://github.com/CoderMJLee/MJRefresh 下拉刷新01-默认 self.tableView.head ...

  3. Eclipse调试常用技巧(转)

    Eclipse调试常用技巧 转自http://daimojingdeyu.iteye.com/blog/633824 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就 ...

  4. iPhone不为人知的功能常用技巧,看完后才发现很多用iPhone的人实在是愧对乔布斯! - imsoft.cnblogs

    很多人花了四五千买部苹果,结果只用到四五百块钱的普通手机功能. iPhone不为人知的功能,常用技巧: 网上搜集整理的iPhone快捷键操作,虽然表面上iPhone按键只有一个HOME键,大部分操作都 ...

  5. yii项目开发项目常用技巧和方法汇总

    1.使用CActiveForm类组件如何输出不带html属性的结果 eg:<?php echo $form->textField($model,'email',array('size'=& ...

  6. Js常用技巧

    摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...

  7. Linux Shell编程之常用技巧

    前言 本文集中介绍了bash编程中部分高级编程方法和技巧.通过学习本文内容,可以帮你解决以下问题: 1.bash可以网络编程么? 2..(){ .|.& };. 据说执行这些符号可以死机,那么 ...

  8. 【前端】javaScript 常用技巧总结

    javaScript 常用技巧总结 1.  彻底屏蔽鼠标右键  oncontextmenu="window.event.returnValue=false" <table b ...

  9. 聊一聊几种常用web图片格式:gif、jpg、png、webp

    前言 在大多数的web页面中,图片占到了页面大小的60%-70%.因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的.图片格式种类非常多,本文仅针对几种web应用中常用 ...

随机推荐

  1. 中断 http请求 正在加载 取消http请求

    中断 http请求  正在加载 取消http请求

  2. SPOJ11414 COT3 博弈论 + Trie树合并

    考虑对于每个子树从下往上依次考虑 对于叶子节点而言,如果可以染色,那么其\(sg\)值为\(1\),否则为\(0\) 考虑往上合并 如果选择了\(x\),那么后继状态就是其所有子树 如果选了其他子树中 ...

  3. BZOJ.4939.[Ynoi2016]掉进兔子洞(莫队 bitset 分组询问)

    BZOJ 洛谷 删掉的数即三个区间数的并,想到bitset:查多个区间的数,想到莫队. 考虑bitset的每一位如何对应每个数的不同出现次数.只要离散化后不去重,每次记录time就可以了. 但是如果对 ...

  4. Spring_Spring@Transactional

    Spring事务的传播行为 在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例 ...

  5. 12174 - Shuffle

    这道题能够用"滑动窗体"的思想来做,假想一个滑动的窗体,这个窗体的大小是s.划过一个大小为n的区域,可是由于s可能比n大,所以我们最好还是不去考虑s和n的大小,直接开出一个足够大的 ...

  6. EZ1105

    http://www.godexintl.com/cn/product/type/model/EZ1105

  7. BoundingBoxUV与BoundingBoxXYZ

    start UIApplication app = commandData.Application; Document doc = app.ActiveUIDocument.Document; ); ...

  8. 移植Python3到TQ2440(二)

    接着前一篇博文. 在上一篇博文中我们用NFS挂载根文件系统的方式启动了系统,接下来我们把移植了Python3的根文件系统固化到NandFlash中,但是由于linux-4.9目前不支持Yaffs2文件 ...

  9. 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查

    AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...

  10. ANDROID DisplayManager 服务解析一

    from://http://blog.csdn.net/goohong/article/details/8536102 http://www.tuicool.com/articles/FJVFnu A ...