手机网站开发及手机中图片加速显示img的Canvas方法

标签: 手机 网站 开发 | 发表时间:2014-07-08 01:37 | 作者:confidence68
出处:http://blog.csdn.net

    随着手机开发越来越流行,手机开发的很多框架也应运而生,比较好用的手机网站开发框架推荐如下:

    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;
	image.Obj.onload = function(){
	   var cvs =$('#cvs_'+this.index)[0].getContext('2d');
	   cvs.width = this.width;
	   cvs.height=this.height;
	   cvs.drawImage(this,0,0);
	}
	imageObject.src=imgSrc;
   }

}
render();


   

   

作者:confidence68 发表于2014/7/7 17:37:21 原文链接
阅读:58 评论:0 查看评论

相关 [手机 网站 开发] 推荐:

手机网站开发及手机中图片加速显示img的Canvas方法

- - CSDN博客Web前端推荐文章
    随着手机开发越来越流行,手机开发的很多框架也应运而生,比较好用的手机网站开发框架推荐如下:.     1、zeptojs,里面封装了很多手机特有方法,例如touch.js等等. 和jquery用法差不多,很好上手. API地址:http://zeptojs.com/#$.extend.     2、jquerymobile   演示地址:http://jquerymobile.com/.

移动开发:学习手机网站设计和制作的25个优秀案例

- - 博客园_梦想天空
  移动互联网时代将要来临,预计未来几年,移动互联网的用户访问量将超过传统的PC互联网. 目前大量的用户通过手机上网冲浪,对于设计师来说,他们需要制作出更优秀的移动网站以吸引更多的用户访问. 为了帮助大家学习手机网站设计,我从网上收集了25个优秀的国外手机网站设计案例分享给大家. 10套精美的免费网站后台管理系统模板.

curl网站开发指南

- Andy - 阮一峰的网络日志
我一向以为,curl只是一个编程用的函数库. 最近才发现,这个命令本身,就是一个无比有用的网站开发工具,请看我整理的它的用法. curl是一种命令行工具,作用是发出网络请求,然后得到和提取数据,显示在"标准输出"(stdout)上面. 它支持多种协议,下面举例讲解如何将它用于网站开发. 直接在curl命令后加上网址,就可以看到网页源码.

触屏手机网站设计

- Ray ma - 互联网的那点事...
随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:.

Ubuntu 推出新版开发者网站

- Lamo - Wow! Ubuntu
为了促进 Linux 软件生态圈的发展,Ubuntu 正式通告发布新版的开发者网站(Ubuntu App Developer site). 可以在 Ubuntu Software Center 中发布自已开发的开源及闭源软件,可以免费或收费,而收费软件可以得到 80% 的提成. 总之,Ubuntu App Developer site 为开发者提供了一整套的解决方案.

Java开发十大必备网站

- - ITeye资讯频道
以下是收集的10个Java开发相关的网站,这些网站质量都很好,它们提供了业界信息以及一些很棒的讲座, 还能解答常见开发过程中遇到的问题、面试问题等. Stackoverflow.com 可能是编程界中最流行的网站了,该网站有成千上万个好问题和答案. 学习API或者编程语言,通常依赖于代码示例,stackoverflow就可以提供大量的代码片段.

网站开发中的字体设置

- - 标点符
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 由于字体设置在代码实现上非常的简单,导致了大多数开发人员都没有重视. 在前端、设计分工协助的状态下很容易导致字体设置成为三不管的状态. 在西文(英文)字体中,最简单的字体分类方式是将字体分为衬线体(serif)与无衬线体(sans-serif).

触屏手机网站-炫版交互设计

- Qing - 所有文章 - UCD大社区
触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别.

智能手机的又一电池杀手:网站代码

- - 爱范儿 · Beats of Bits
如果你经常泡智能手机论坛,你会发现几乎每个手机论坛都会有一个类似的经典帖子,帖子标题通常是《如何让你的 ××× 待机超过两天》《××× 省电大法》等等……再看看这类帖子的发帖时间,你会发现它们历史都比较久远,并且回复量大、经久不衰是它们的一致特点. 而这些帖子的内容都大同小异:必有的是关闭 3G,关闭蜂窝数据,关闭定位服务,调低屏幕亮度,稍稍高级点的就是删进程,关后台等等.