如果判断图片是否已经加载过(本地缓存了)?
: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});
    })......
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.....
用Jquery实现iframe的高度自适应
:HTML/CSS    :kukei    :2013-01-16 08:51:16
:评论(5)

在web开发中经常要用到iframe这个功能,它能灵活方便的在页面上载入另一个页面,但是显示方面的问题就是在使用iframe的页面进程出现双滚动条,这个在显示效果上极其差劲。出现这个情况的原因就是当前页面和iframe页面的高度没能自适应,在最近的开发中我发现使用jquery很方便就能实现高度的自适应,方法如下。

首先页面布局如下:

<html>
<body>
<div id='a'><iframe id="ai" src="" style="..."></iframe></div>
<div id='b'><iframe id="bi" src="" style="..."></iframe></div>
</body>
</html>

js脚本如下:

$('iframe').load(function(){
    var $this = $(this);
    $this.height($($this.contex.....
css  html  jquery  web  
JQuery的stop函数的应用
:Web开发    :kukei    :2012-12-05 14:54:38
:评论(1)

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

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

函数介绍:

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

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

参数说明:.....

SDLog增加查看图片原图的功能
:sdlog    :kukei    :2012-10-29 20:51:58
:评论(1)

博客和文章中经常需要插入图片,但是图片的大小和文章的布局或博客页面的宽度不一定匹配,如果图片太大插入博客中为了能全部显示不得不将图片缩小,这样图片的显示效果就要大大折扣了,因此我在SDLog中增加了查看图片原图的功能。

功能介绍如下:

鼠标移动到图片上时显示图片边框,给读者提示,并在图片的左上方给出一个查看原图的按钮,点击这个按钮弹出一个的对话框显示这个图片的原图,当然按图片的原始大小显示。

这个功能使用JQuery实现的,我开发了一个JQuery的插件,当然这个插件是很简单,代码如下:

/***
name: jquery.sd.imgview.js
designer: kukei
Copyright(C) 2011 SupDo.com
Create Date: 2012-09-05
Modify Date: 2012-09-05
***/
    
(function($){ 
var settings = {
}.....
图片延迟加载插件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.....

HTML5之文件上传JQuery插件
:Web开发    :kukei    :2012-09-11 16:55:17
:评论(1)

在试过了swfuploadify上传插件,虽然可以上传,但是session会丢失,造成无法进行服务器验证,因此我终于决定自己开发一个上传插件了jquery.sdupload.js。这个插件只支持html5的浏览器,毕竟html5是未来的趋势。

使用方法:
<script type="text/javascript" src="/static/default/js/jquery.js"></script>
<script type="text/javascript" src="/static/default/js/jquery.sdupload.js"></script>
<link rel="stylesheet" href="/static/default/css/sdupload.css" type="text/css" />
<div id="fileList"></div>
<input type="file" na.....
JQuery插件开发的一些知识
:Web开发    :kukei    :2012-09-05 15:06:13
:评论(1)
前言

sdlog中需要一个图片上传的功能,而网上常用的jquery上传插件就是Uploadify,说实话,我从Uploadify2.14,3.0,3.1,3.2几个版本测试使用过来没有一个称心的,其实是都没使用成功。

2和3版本参数不一致,3.1报错在upload函数中534行,原因:swfuploadify.queueData未定义,其实是$this.data('uploadify')中定义的值丢失。3.2版本中报错:$.tmpl($itemTemplate, itemData)函数未定义,在这种情况下我决定自己做个JQuery上传插件。

情况说明:

1.$this.data('uploadify')中定义的值丢失的问题是因为使用了一个jquery对话框插件lhgdialog.js,如果先初始化uploadify然后初始化对话框,则$this.data('uploadify')中定义的值丢失,因此需要先对话框,在对话框的init函数中.....