【译】jQuery延迟加载插件(Lazy Load)

2012-01-17 4 Comments

最新版本的Lazy Load并不能替代你的网页。即便你使用JavaScript移除了图片的src属性，有些现代的浏览器仍然会加载图片。现在你必须修改你的html代码，使用占位图片作为img标签的src属性。真实的图片地址应该存储在data-original属性中。 <img data-original="img/example.jpg" src="img/grey.gif"> 好处是现在你可以把你所有的JavaScript脚本放在页面的底部。如果你想支持没有启用JavaScript的浏览器，你必须在<noscript>标签内包含原始图像。阅读下面的文档获取更多信息。 Lazy Load 是用JavaScript编写的jQuery插件。它会延迟长页面中的图片加载。可视区域外的图片在用户滚动到他们之前不会加载。这与图片预加载(image preloading)是截然相反的情况。 在包含很多大体积图片的长页面中使用Lazy Load，会使加快页面的载入速度。当可视区域的图片加载完成后，浏览器将会处于准备状态。在一些情况下，这也会帮助服务器降低负载。 Lazy Load 灵 » » »阅读更多

Flash 拷贝字符串到剪贴板

2011-10-14 No Comments

JS无法做到访问DOM之外的内容，也就无法做到拷贝字符串到系统剪贴板，这时候只能用Flash去实现，个人感觉别无他法。 Flash操作系统剪贴板，知识点有两处。 1 » System.setClipboard(str) 拷贝字符串到系统剪贴板 2 » ExternalInterface.call(func, param...) AS调用JS函数 下面是Flex代码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="16" minHeight="16"> <fx:Script> <![CDATA[ public function copyToClipboard():void { var text:String = ExternalInterface.call('Copy.clipBoard'); var status:Boolean = false; if (text) { System.setClipboard(text); status = true; }  » » »阅读更多

Flex学习笔记

2011-08-27 No Comments

Flex是由界面语言MXML、脚本语言ActionScript组成的，主要针对开发人员，也就是代码写的较多的一类人。MXML用来划出界面，功用类似HTML。AS和JS同出规范ECMAScript，不过AS更加地面向对象，浏览器部署依赖Flash插件，桌面部署依赖AIR。JS是浏览器原生支持的，因为考虑安全性，JS无法访问客户端本地数据，这时候Flash只是作为一种替代。至于是否大量应用，还要看开发需求及开发者个人喜好。本人初学，如果有错误之错，敬请指正。 开发Flex应用一般使用Adobe的Flex Builder软件，或者基于Eclipse的Flex Builder插件。官方提供下载。 事件绑定 AS和JS事件绑定类似，不过AS不用考虑浏览器兼容了，直接对象调用addEventListener方法即可。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="initApp(event);"> <mx:Script> <![CDATA[ » » »阅读更多

HTML5 data- 属性

2011-06-20 No Comments

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。 data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。 <div data-author="david" data-time="2011-06-20" data-comment-num="10" data-category="javascript"> .... </div> 上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。 var post = document.getElementsByTagName('div')[0]; post.dataset; // DOMStringMap post.dataset.commentNum; // 10 需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 并不是所有的浏览器都支持.da » » »阅读更多

Yahoo网站优化最佳实践

2011-04-22 No Comments

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 34 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 其中内容部分一共十条建议: 一、内容部分 1. 尽量减少HTTP请求 2. 减少DNS查找 3. 避免跳转 4. 缓存Ajxa 5. 推迟加载 6. 提前加载 7. 减少DOM元素数量 8. 用域名划分页面内容 9. 使frame数量最少 10. 避免 404 错误 1、尽量减少 HTTP 请求次数 终端用户响应的时间中, 80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。 那么有没有一 » » »阅读更多

使用.htaccess设置目录访问权限

2010-10-10 No Comments

1 创建存放用户名密码的文件 需要借助Apache提供的htpasswd命令。Windows系统中该命令在Apache的/bin文件夹中。*unix可直接在终端中输入。 $ htpasswd -c security.pwd user New password: Re-type new password: Adding password for user user -c: 创建新文件，security.pwd: 创建的文件名，user为访问该目录时所需要的用户名。 2 配置.htaccess文件。 AuthType Basic AuthUserFile "/var/www/html/security.pwd" AuthName "myrealm" Require valid-user 思路：首先创建需要的密码文件，然后在需要访问限制的目录中修改.htaccess文件，使之可以访问到创建的密码文件。最后测试一下，大功告成。 阅读更多

使用Flickr API构建应用

2010-08-26 No Comments

互联网的mashup模式开发越来越流行，网站已经不是单纯地提供信息，更多的是集成更多的服务，构建大型的应用程序。这种趋势越来越明显，很多大的互联网公司都公布了自己的API接口，提供给开发者更多的可操作资源。Google Map提供的是JavaScript接口，以前了解过一些，大概忘得差不多了。Google Chrome extension里提供的一个小例子是从Flickr请求图片，里面的请求脚本是用JavaScript写的，自己写了段脚本，不过无法从Flickr请求成功，后来才猛然觉悟是JavaScript同源策略导致的。不过Chrome可以请求成功，应该是内部实现了某种方式。 Flickr官方提供了多种编程语言接口实现，以及可以使用的API。其实看清API应用并不神秘，只是如果能充分使用官方提供的API接口，构建各种应用就可轻而易举。这里用PHP作为实现方式。看代码。 忘了说明一点，使用Flickr API必须要有自己的api_key，可以轻松地从Flickr官方获取。 <?php $url = 'http://api.flickr.com/servi » » »阅读更多

星级评分之CSS

2010-08-03 1 Comments

现在很多网站为了加强与用户的沟通，提供了评分系统，关于商品的好坏，文章的质量如何，都可以加入评分系统。这种系统结合JavaScript与CSS创建，当然最终的结果还是要保存到数据库中。这里先谈谈关于样式的问题，JavaScript暂且不谈，我觉得重要的是如何构建HTML，结合图片素材创建CSS。网上大部分教程都是用的淘宝的HTML结构和CSS样式。淘宝提供的是Sprites图片，通过控制background-position属性来控制图片的显示位置。效果图。 HTML结构问题 <div id="shop-rating"> <ul class="rating-level"> <li><span class="one-star" start:value="20">20</span></li> <!-- or <a class="one-star">..</a> --> <li><span class="two-star" sart:value="40">40</span></li> <li><span class="three-star" sart:value="60">60</span></li>  » » »阅读更多

CKEditor安装和使用

2010-06-15 No Comments

CKEditor是一款可嵌入到网页中的所见即所得的文本编辑器。可以从http://ckeditor.com/download下载。 在HTML文档的head标签内插入如下代码，其中ckeditor.js是压缩之后的CKEditor核心文件，只需调用该文件就足够了。 <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 使用CKEditor的方式有两种。一是给textarea标签添加ckeditor类，二是使用CKEditor提供的CKEDITOR.replace()函数。 方法一 <textarea class="ckeditor" name="editor1" id="editor1" cols="80" rows="20"></textarea> 方法二 <textrea name="editor2" id="editor2" cols="80" rows="20"></textarea> <script type="text/javascript"> CKEDITOR.replace('editor2'); // editor2是指id值为"editor2" </script> 阅读更多

重置浏览器默认样式

2010-04-24 No Comments

布局样式表包括显示属性，浮动，定位，宽度，高度以及边距和填充，一般命名为layout.css。 颜色样式表包括背景属性，颜色和图片以及文本颜色，一般命名为color.css。 版式信息包含了字体和字体大小，行高，字母间隔以及文本装饰，一般命名为typography.css。 为减少XHTML文档链接的样式表数量，一般习惯只是链接一个样式表。 <link rel="stylesheet" type="text/css" href="layout.css" /> 然后，用@import规则来引用其他样式表。 @import url(color.css); @import url(typography.css); 重写浏览器默认样式： body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin: 0; padding: 0; } /* Normalizes margin, padding */ h1, h2, h3, h4, h5, h6 { font-size: 100%; } /* Normalizes font-size for headers */ ol, ul { list-style: none; } /* Remove list-style from lists */ A » » »阅读更多