如果判断图片是否已经加载过(本地缓存了)?
:Web开发    :kukei    :2013-05-23 12:38:15
:评论(1)

我们在做图片延迟加载或者加载大图片时我们希望显示一个loading图片友好的提示用户,这时我们常用图片的load事件,这个事件是在图片加载完成时触发的,但是有个前提条件就是,只能在图片第一次加载时能触发。这当用户第二次打开图片时我们开发就遇到了难题,如果判断图片是否已经加载过(本地缓存了)?这时就该complete属性登场了,如果本地缓存了complete==true了

例子:

function showImg(newSrc){
    var newimg = $('<img />').load(function(){
        $('#curImg').html('').append($(this));
        var w = $('#imgShow').width();
        $('#imgShow').stop().animate({marginLeft:w/2*-1});
    })......
target指定iframe的name之后仍弹出新窗口的问题
:Web开发    :kukei    :2013-03-16 14:06:28
:评论(1)

我们在页面中经常使用iframe来进行局部刷新,这是一个很方便的功能。比如我们用页面上的一个超链接来刷新我们指定的iframe,这时我们就在超链接标签中的target属性设置为我们要刷新的iframe的name,但是我们发现在有些浏览器中即使指定target为iframe的name,但是仍然会弹出一个新的窗口在现实新内容,这是我们不希望看到的,要解决这个问题就要用就用javascript来控制了。

具体代码如下:

<script type="text/javascript">
    function resetFrame(obj){$(obj).height($("#imglist .images",$("#listiframe").contents()).height()+500);}
    function initImg(){$('#listiframe').attr('src', $('.imgsider ul li.....
jquery中post后responseText为空的问题
:Web开发    :kukei    :2013-03-12 16:38:35
:评论(2)

最近将sdsite修改了一个版本,即本地版本,将它部署到了阿里云的vps上,大部分运行良好。不过有个小问题一直没有找到原因,就是jquery中post后responseText为空的问题。同样的情况在我的本机或在sae上均能正常返回数据,但是在阿里云上却不能返回数据。

我将post改为get后竟又能反返回正常数据了,不过get方式不是我想要的,而且还不能确认这个问题是jquery的问题还是阿里云服务器上的问题,等待进一步的解决。先看看代码:

function del(option){
    try{
        if(delCtrl.isRunning){$.dialog.alert('处理中,请勿重复提交!');return false;}
        if(option.id){$("#"+option.id).attr('bgcolor','#FFCC99');}
        if(option.form.....
WEB程序浏览器兼容性云测试工具-BrowserStack
:Web开发    :kukei    :2013-01-11 22:07:40
:评论(1)

做web程序有一个很烦人的地方就是要兼顾各种浏览器,我为此在我电脑转了多个浏览器,但是ie浏览器在一个电脑上只能装一个,但是它不同的版本会有不同的浏览效果,如此类的问题让人很恼火。

今天终于发现一个网站BrowserStack 是一个提供网站浏览器兼容性测试的在线云端应用,支持9大操作系统上的100多款浏览器。支持本地测试,预装有完备的开发者工具。网站体验流畅,无需安装~ 即时连接所有桌面或移动浏览器,对虚拟机说再见吧!

看看支持的操作系统:

看看支持的浏览器:


看看测试的桌面效果:


BrowserStack 连接的是货真价实的远程桌面,我们可以直接通过浏览器操控云端浏览器。

是不是觉得十分强大?不过免费用户只有30分钟的试用时间,不过偶尔用用也够用了~ 官方的付费套餐也不算太贵,绝对物超所值哦~

传送门:http://www.browserstack.com/


JQuery的stop函数的应用
:Web开发    :kukei    :2012-12-05 14:54:38
:评论(1)

Jquery框架之所以如此受欢迎是因为他提供了许多功能强大的函数,用这些函数我们很方便的构造各种效果。就像本博客的默认风格中多级菜单的显示,当鼠标移动到菜单上时如果有子菜单,子菜单就会滑出,鼠标移开子菜单滑入,我感觉效果很棒,这些都是jquery的功劳,直接使用slideDown,slideUp函数即可。然而如果仅使用这两个函数会有些瑕疵,因为我们鼠标的移入和移出是瞬间的菜单的滑入和滑出是需要时间的,如果我们快速的多次划过菜单你就会发现当你的鼠标已经离开菜单了,子菜单还在不停地做滑入滑出的动作,完全不顾你的心情。其实这不能怪jquery,因为我么的鼠标事件触发的效果全部存在效果队列里面,如果不清除,子菜单就会把队列中的效果执行完毕。

那有没有清除效果队列的函数呢?当然有,就是stop函数。

函数介绍:

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

参数说明:.....

SDLog优化了留言评论的风格
:Web开发    :kukei    :2012-11-05 22:51:35
:评论(1)

今天对留言评论的风格进行了优化,增加了小小尖角提示,以及边框的发光效果,当然这些都是用html+css实现的,没有用到图片啊,我觉得这个功能非常实用,在SDLog中使用后还可以搬到其他程序中用,先看看效果怎样。  

代码如下

HTML代码:

<div id="e-345" class="comment clear">
       <div class="avatar font-12"><a href="/goto/http://www.szinlan.com/" target="_blank">kukei</a></div>
       <div class="cmtctt poptip">
             <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
             <div class="cmtctt-ctt .....
Javascript应用之cookie的操作
:Web开发    :kukei    :2012-10-16 16:11:03
:评论(4)

cookie信息虽然用来保存用户名密码不可靠,用来验证用户是否登陆不可靠,但是还是有许多地方可以使用的,比如保存访客上次留言是保留的名称,邮箱,主页等信息,以便用户下次访问我们的网站时可以免填一下这些非重要的重复信息。

用Javascript对cookie的操作方法如下:

设置cookie
  每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie="userId=828";
  如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:
document.cookie="userId=828; userName=hulk";
  在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存 储这些值呢?方法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例.....

Javascript应用之打印日志
:Web开发    :kukei    :2012-10-16 15:31:26
:评论(1)

常用的开发语言中我们对日志并不陌生,因为这是一个重要的功能,能够记录程序运行的一些重要数据,以便我们观察程序运行的情况,或者在我们调试程序时打印出我们想要的变量数据。

然而在javascript程序中我们经常用alert功能来弹出信息做调试之用,这在大部分时间是可行了,但是还有一种更好,似乎也跟规范的方法来打印记录程序日志,即console.log API。

我是在调试不同事件下和事件之间切换时发现了用alert有诸多不便的情况在才使用console.log的,其实是用了之后,我觉的console.log比alert更好些。

很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。console.log API已经成为JavaScript开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息,很多浏览器提供了分栏窗格的视图。console.log API要比alert()好用很多,因为它不会阻塞脚本的执行.....

图片延迟加载插件jquery.lazyload.js
:Web开发    :kukei    :2012-09-16 21:24:54
:评论(1)

经常在一些网站上见到图片都是在窗口上将要出现的时候才进行服务器请求,才进行显示。当时就想这样岂不是能在图片较多或图片较大的页面上有效的减少服务器请求和网络流量么,后来才发现原来这个就是方法叫做图片延迟加载。

现在有一个jquery的插件叫做“jquery.lazyload.js”,专门进行图片延迟加载处理,处理方法如下:

<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : 'loading.gif',
     effect      : "fadeIn"
});
});
</script>

但是似乎jquery.lazylo.....

Bootstrap一个来自Twitter的前端框架
:Web开发    :kukei    :2012-09-14 18:29:22
:评论(2)

Bootstrap已经推出版本了,但是我是到现在才了解到这个东东的。据说它是一个简单灵活流行的 HTML, CSS, Javascript 用户界面与交互组件。做web开发经常受困于前端展示效果,受困于浏览器的差异,因此我也学些了许多css框架,就像现在的sdlog程序就使用了css框架,但其实我之用了其中的网格和reset的部分功能,因为我一直觉得它还不是很好用。但是今天的这个东东既然大家这么推荐就学些一下,希望能在sdcms上用到,简化前端的设计工作。

相关资料:

http://www.bootcss.com/

Bootstrap, 来自 Twitter

https://github.com/twitter/bootstrap/

http://www.iteye.com/blogs/tag/bootstrap

看看Bootstrap的简介:

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他.....