手机站点开发及手机中图片加速显示img的Canvas方法
随着手机开发越来越流行,手机开发的非常多框架也应运而生,比較好用的手机站点开发框架推荐例如以下:
1、zeptojs。里面封装了非常多手机特有方法,比如touch.js等等。
和jquery使用方法差点儿相同,非常好上手!
API地址:http://zeptojs.com/#$.extend
2、jquerymobile 演示地址:http://jquerymobile.com/
3、angularjsmobile 演示地址:http://mobileangularui.com/
近期做手机开发项目是。遇到图片载入非常慢的情况。对这样的情况,手机开发一般用canvas方法载入:
详细的canvas API 參见:http://javascript.ruanyifeng.com/htmlapi/canvas.html
以下举例说明一个canvas的样例:
<li><canvas></canvas></li>
js动态载入图片和li
总共举例17张图片!
var total=17;
var zWin=$(window);
var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl ='';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
var imageObj = new Image();
imageObj.index = i;
imageObj.onload = function(){
var cvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
} }
render();
手机站点开发及手机中图片加速显示img的Canvas方法的更多相关文章
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...
- 我的Android最佳实践之—— ImageView中图片拉伸显示
通过设置android:scaleType="fitXY"使得图片拉伸显示.补充:scaleType的属性有matrix(默认).center.centerCrop.centerI ...
- Source insight 中 标题栏路径显示完整路径的方法
在source insight 的标题栏中显示完整路径名的方法.Options -> Preferences -> Display -> Trim long path names w ...
- 华为手机在开发Android调试时logcat不显示输出信息的解决办法
手机连接电脑RUN AS logcat 提示:Unable to open log device '/dev/log/main': No such file or directory 信息 本人华为C ...
- dede 采集文章内容中图片不显示的问题
找到include文件下面的dedecollection.class.php 找到DownMedias这个方法,大概在870行 //下载标记里的图片和flash $okurl = $this-> ...
- 上传图片到数据库,读取数据库中图片并显示(C#)
from:http://blog.csdn.net/bfcady/article/details/2622701 思路:建立流对象,将上传图片临时保存到byte数组中,再用SQL语句将其保存到数据库中 ...
- 移动端-处理后台传过来的html中图片的显示
function DealWithImg() { var width = 0; if (window.screen.width) { width = window.screen.width; } el ...
- nginx中图片无法显示
如果没有配置虚拟主机,则修改nginx.conf. 如果已创建单独虚拟主机,则在vhost下找到指定的主机配置文件, 如:www.xxx.com.conf location ~ .*\.(gif|jp ...
随机推荐
- C# 汉字的字符串截取指定字节的长度
int index = 0; int setCharCount = 74; string str1 = "三星 SCH-I829 电信3G手机(优 ...
- sql - Invalid object name 'dbo.in$'
这是我从excel导入的表,用查询的时候,不加前面部分的'dbo',能查出来,好像是owner的原因吧.
- nodejs概论(实操篇)
什么是模块? 模块分为原生模块(node.jsAPI提供的原生模块,在启动时已经被加载)和 文件模块(动态加载模块,主要由原生模块module来实现和完成.通过调 用node.js的require方法 ...
- weka打开提示内存不足的解决方法
今天在linux中打开Weka时,打开基因数据文件的时候出现如 Not enough memory . Please load a smaller dataset or use a larger he ...
- POJ 2438 (哈密顿回路)
分析: 2*n个小朋友,每个最多有n-1个"敌人",显然是存在哈密顿回路的. 预处理边,然后找哈密顿回路. code #include <iostream> #incl ...
- 对于方法 String.Contains,只支持可在客户端上求值的参数。
var ProjectLevel_XJJS = "06,07,08,09"; p.Where(e =>ProjectLevel_XJJS.Contains(e.LevelCo ...
- 离线安装maven,重新打开eclipse报错处理方法
报错截图如下 1.eclipse 添加 jre Window -> Preferences -> Java -> Installed JREs If you can’t find a ...
- Boost使用笔记(Smart_ptr)
我是Word写的,复制过来实在懒得在排版了,有兴趣的朋友可以去我的百度文库看,谢谢 http://wenku.baidu.com/view/34e485e2f61fb7360b4c653e.html ...
- C# 部分关键字
关键字: virtual: 虚方法,本身可以被实例化,也可以在派生类中重写该方法: override:在派生类重写基类虚方法时声明,避免了C++中的潜在运行错误: abstract:声明为抽象类.抽 ...
- Swift互用性:与 Objective-C 的 API 交互(Swift 2.0版更新)-备
本页包含内容: 初始化 可失败初始化 访问属性 方法 id 兼容性(id Compatibility) 空值和可选值 扩展(Extensions) 闭包(Closures) 比较对象 Swift 类型 ...