核心知识点: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代理。gradle可能需要这些http代理设置去访问互联网。例如下载依赖。 你想要复制ide的代理配置到这个项目的gradle属性文件吗?

    代理设置. 安卓工作室配置用http代理.gradle可能需要这些http代理设置去访问互联网.例如下载依赖. 你想要复制ide的代理配置到这个项目的gradle属性文件吗? 查看更多细节,请参阅开发 ...

  2. 五校联考R1 Day1T3 平面图planar(递推 矩阵快速幂)

    题目链接 我们可以把棱柱拆成有\(n\)条高的矩形,尝试递推. 在计算的过程中,第\(i\)列(\(i\neq n\))只与\(i-1\)列有关,称\(i-1\)列的上面/下面为左上/左下,第\(i\ ...

  3. 【LCA】BZOJ1776-[Usaco2010 Hol]cowpol 奶牛政坛

    [题目大意] 一棵n个点的树,树上每个点属于一个党派,要求每个党派的最远距离点.两点间距离为两点间边的个数. [思路] yy一下可知,最远距离点中必有一个是该党派深度最深的一个,那么我们就记下最深的点 ...

  4. 《Go语言实战》摘录:6.4 并发 - 锁住共享资源

    6.4 锁住共享资源

  5. Programming 2D Games 读书笔记(第三章)

      示例一:DirectX Window Graphics类用于初始化Direct 3D 主流程: 仅需要粗体部分 try{ // Create Graphics object graphics = ...

  6. [Winform]setupfactory制作安装包卸载输入密码进行验证

    摘要 项目有这样一个需求,在体验机上安装了一个软件,如果有用户卸载的时候,给与输入密码验证的提示,当然强制删除软件所在目录除外.那么这个有办法实现吗? 解决办法 在卸载的时候,用户单击下一步的时候进行 ...

  7. In-Place upgrade to Team Foundation Server (TFS) 2015 from TFS 2013Team Foundation Server TFS TFS 2015 TFS upgrade TFS with Sharepoint

    This upgrade document gives detailed step by step procedure for the In-Place upgrade from TFS 2013 t ...

  8. java之 ------ 文件拷贝

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...

  9. AngularJS过滤排序思路

    本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name" ...

  10. Windows下安装WebLogic

    WebLogic安装结束 以下是进入MyEclipse启动配置WebLogic