随着手机开发越来越流行,手机开发的非常多框架也应运而生,比較好用的手机站点开发框架推荐例如以下:

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方法的更多相关文章

  1. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  2. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发

    经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...

  3. 我的Android最佳实践之—— ImageView中图片拉伸显示

    通过设置android:scaleType="fitXY"使得图片拉伸显示.补充:scaleType的属性有matrix(默认).center.centerCrop.centerI ...

  4. Source insight 中 标题栏路径显示完整路径的方法

    在source insight 的标题栏中显示完整路径名的方法.Options -> Preferences -> Display -> Trim long path names w ...

  5. 华为手机在开发Android调试时logcat不显示输出信息的解决办法

    手机连接电脑RUN AS logcat 提示:Unable to open log device '/dev/log/main': No such file or directory 信息 本人华为C ...

  6. dede 采集文章内容中图片不显示的问题

    找到include文件下面的dedecollection.class.php 找到DownMedias这个方法,大概在870行 //下载标记里的图片和flash $okurl = $this-> ...

  7. 上传图片到数据库,读取数据库中图片并显示(C#)

    from:http://blog.csdn.net/bfcady/article/details/2622701 思路:建立流对象,将上传图片临时保存到byte数组中,再用SQL语句将其保存到数据库中 ...

  8. 移动端-处理后台传过来的html中图片的显示

    function DealWithImg() { var width = 0; if (window.screen.width) { width = window.screen.width; } el ...

  9. nginx中图片无法显示

    如果没有配置虚拟主机,则修改nginx.conf. 如果已创建单独虚拟主机,则在vhost下找到指定的主机配置文件, 如:www.xxx.com.conf location ~ .*\.(gif|jp ...

随机推荐

  1. C# 汉字的字符串截取指定字节的长度

    int index = 0;            int setCharCount = 74;            string str1 = "三星 SCH-I829 电信3G手机(优 ...

  2. sql - Invalid object name 'dbo.in$'

    这是我从excel导入的表,用查询的时候,不加前面部分的'dbo',能查出来,好像是owner的原因吧.

  3. nodejs概论(实操篇)

    什么是模块? 模块分为原生模块(node.jsAPI提供的原生模块,在启动时已经被加载)和 文件模块(动态加载模块,主要由原生模块module来实现和完成.通过调 用node.js的require方法 ...

  4. weka打开提示内存不足的解决方法

    今天在linux中打开Weka时,打开基因数据文件的时候出现如 Not enough memory . Please load a smaller dataset or use a larger he ...

  5. POJ 2438 (哈密顿回路)

    分析: 2*n个小朋友,每个最多有n-1个"敌人",显然是存在哈密顿回路的. 预处理边,然后找哈密顿回路. code #include <iostream> #incl ...

  6. 对于方法 String.Contains,只支持可在客户端上求值的参数。

    var ProjectLevel_XJJS = "06,07,08,09"; p.Where(e =>ProjectLevel_XJJS.Contains(e.LevelCo ...

  7. 离线安装maven,重新打开eclipse报错处理方法

    报错截图如下 1.eclipse 添加 jre Window -> Preferences -> Java -> Installed JREs If you can’t find a ...

  8. Boost使用笔记(Smart_ptr)

    我是Word写的,复制过来实在懒得在排版了,有兴趣的朋友可以去我的百度文库看,谢谢 http://wenku.baidu.com/view/34e485e2f61fb7360b4c653e.html ...

  9. C# 部分关键字

    关键字: virtual:  虚方法,本身可以被实例化,也可以在派生类中重写该方法: override:在派生类重写基类虚方法时声明,避免了C++中的潜在运行错误: abstract:声明为抽象类.抽 ...

  10. Swift互用性:与 Objective-C 的 API 交互(Swift 2.0版更新)-备

    本页包含内容: 初始化 可失败初始化 访问属性 方法 id 兼容性(id Compatibility) 空值和可选值 扩展(Extensions) 闭包(Closures) 比较对象 Swift 类型 ...