用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

        最近站长Tony开发了一个jquery.imgresize.js插件,这是一个用来修改图片大小并保持长宽比的jQuery插件,用于用户发布文章之后查看文章,如果用户的图片超过了我们容器的宽度不至于把样式搞乱,如果没有超过容器的宽度就保持原来的大小,兼容IE6、7、8浏览器。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('img').imgresize();
$('img').imgresize({width:600});

支持多张图片同时调整大小,例如选择器的元素有多张图片,让多张图片同时调整成等于或小于width的大小。没有填写width这个参数图片将保持原来的大小。

2013年9月25日优化了原来的代码,提高了插件的兼容性。

demo地址:http://www.tonitech.com/demo/jquery.imgresize.js

jquery.imgresize.js插件的代码如下:

// @charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来修改图片大小并保持长宽比的jQuery插件
 * 兼容IE6浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-9-25 14:46:49
 */
(function($) {
    $.fn.imgresize = function(opts) {
        var defaults = {
            width : null
        };
        var options = $.extend(defaults, opts);

		if(options.width != null) {
            if($.browser.msie) {
				$('img').each(function(index, element){
                    var src = $(element).attr('src');
                    $(element).load(function() {
                        iresize(this);
                    });
                    $(element).attr('src', src + '?' + new Date().getTime());
				});
            } else {
                $('img').load(function() {
                    iresize(this);
                });
            }
        }

        function iresize(self) {
            var width = $(self).width();
            var height = $(self).height();
            if(width > options.width) {
                height = options.width * height / width;
                $(self).css('width', options.width);
                $(self).css('height', Math.round(height));
            }
        }
    };
})(jQuery);

demo下载地址:

jquery.imgresize.js (564)

为什么要width:100%

在很多活动页面或者功能页面中因为要适应大屏幕和小屏幕的同时需要,都需要设置一张大的复杂背景,或者平铺背景。
实现这个超过正常屏幕大小背景图片的方法通常是在外面加一层背景,源代码如下:
<div style=”width:100%; background:URL(../images/bg.jpg) no-repeat center center”></div>
有的时候在想,这个width为什么要设置成100%,我设置成这个大图片的宽度不是照样也可以实现么!!!
答案当然是否定的!因为这样在小于图片宽度的屏幕上是不行的。
除此以外,还为避免防止以下情况:
1.默认符合盒模型的html标签,默认都是width:auto;
2.设置float,position:absolute之后,元素的width进入了一个宽度不定状态。这个时候,设置width就是很有必要的了。
3.背景图需要居中,背景无限延伸时,需要设置width:100%触发haslayout,主要正对IE6
4.width:100% 除了定义宽度外,还可以触发haslayout,主要针对IE6

JavaScript加载请求图片完成之后再进行其他操作的onload方法

    在工作中遇到了一个问题:用户点击一个链接之后出现弹出框,然后在弹出框中显示图片,这些图片的大小不一,有可能会超过弹出框的宽度,所以需要预先获得图片的长宽比,然后对图片的大小进行修改。

    这个是一个AJAX请求,请求过来的是图片的url,JavaScript需要在图片加载完成之后才会获得图片的大小信息的,所以,修改图片大小操作的函数需要在图片加载完成之后才能执行,否则就会出现获取不到图片长宽信息出现错误的现象。

    最开始的时候,我想到的方法是使用setTimeOut,在执行修改图片大小的函数之前等200ms,这样可以保证图片加载进来,但是这样的方法如果遇到网速很慢的情况的时候还是会出现获取不到图片的信息现象,而且就算网速正常,200ms的等待我们肉眼也能感觉得到那图片的位置和大小在变化。

    后来,发现JavaScript的onload()可以完成这个任务,onload事件是当一个页面或是一张图片加载完成时被触发的。所以,在请求的img标签里面添加一个onload事件:

<img src="url" onload="imgOnload()" />

    其中imgOnload()是对图片进行修改大小的函数,这样我的问题就解决了。

MATLAB的GUI中保存axes图片的方法

在按钮的回调函数中写下如下代码:

function pushbutton5_Callback(hObject, eventdata,
handles)

% hObject handle to pushbutton5 (see
GCBO)

% eventdata reserved – to be defined in a future
version of MATLAB

% handles structure with handles and
user data (see GUIDATA)

[f,p]=uiputfile({'*.jpg'},'保存文件');

str=strcat(p,f);

pix=getframe(handles.axes2);

imwrite(pix.cdata,str,'jpg')

其中[f,p]=uiputfile({'*.jpg'},'保存文件'); 是为了打开如下界面:

pix=getframe(handles.axes2);

imwrite(pix.cdata,str,'jpg')

是为了将axes中的图片写入jpg格式的图片中。

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=417

网站优化的方法(给你的网站减肥)

         如果你的网站刚刚拿去检测了之后,发现结果不满意,怎么办?有几个方法可以帮你解决问题。

        1.给图片瘦身。如果你网站的图片加载速度特别慢,谷歌会把你的页面置于非常靠后的位置。你可以考虑下格式,如果是一张需要表现细节的照片,你可以将它设置为位图,不过,如果是线条或者图标,你可以使用更小的矢量图。几乎所有的图片都可以减肥,你可以尝试让图片使用更少的色彩、图像大小压缩技术。比如,Photoshop里,点击文件->存储为Web和设备所用格式,可以优化和编辑图片,并可以显示大小变化多少。

        2.清理网页。很多人创建网站的时候会走捷径,会去使用别人的代码,会用模板,而不是重零开始纯手工打造,这样会付出代价的。这些方法往往会在页面上留下许多短字节的废话或遗留的代码。所以,要找一个有经验的工程师看看你的页面,删除部分没用的代码。

        3.利用CSS。你的页面用很多的表格?可以利用CSS去掉一些笨重的HTML,当然啦,本人已经很少使用table了,都是利用DIV+CSS来制作网页。如果你使用了CSS,你还要对CSS进行优化,如果你不知道怎么优化,那我就推荐一个工具给你——雅虎的YUI Compressor,你可以到http://yuilibrary.com/download/yuicompressor/这个网址下载它。它的效果你可以看看,刚刚开始的时候你的CSS代码是:

.color-me { color: rgb(123, 123, 123); border-color: #ffeedd; background: none repeat scroll 0 0 rgb(255, 0,0);}

优化之后:

.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

可以看出,RGB颜色的值被优化了,然后代码紧凑了之后减少了空格占用的空间。

        你需要扪心自问下,你的主页真的需要欢迎动画吗?人们来你的网站就是为了看这些超大的图片吗?你的网站是否堆满了导致它无法正常运行的垃圾?你要抽出时间来个大扫除了!