处理页面加载图片js(等比例压缩图片)

第一页面html  <div class="admin">${answer.content}</div>

<div class="adminss">${answer.content}</div>

第二循环压缩${answer.content}内容中的大图片

<script>

jQuery(function(){

setTimeout(‘imgLoad()‘1000)//延长加载一分钟

});

function ‘imgLoad(){//页面加载时循环遍历压缩admin下面内容带有img标志的图片

jQuery(‘.admin img‘).each(function(i){

DrawImage(jQuery(‘.admin img‘).eq(i),600,600);

});

jQuery(‘.adminss img‘).each(function(i){

DrawImage(jQuery(‘.adminss img‘).eq(i),500,500);

});)//页面加载时循环遍历压缩admin下面内容带有img标志的图片 500,500用户自定义

}

</script>

第三 压缩图片的js

<script language="JavaScript">

<!--

//图片按比例缩放

var flag=false;

function DrawImage(ImgD,iwidth,iheight){

//参数(图片,允许的宽度,允许的高度)

var image=ImD;

image.src=ImgD.attr(‘src‘);

if(image.width()>0 && image.height()>0){

flag=true;

if(image.width()/image.height()>= iwidth/iheight){

if(image.width()>iwidth){

ImgD.width(iwidth);

ImgD.height((image.height()*iwidth)/image.width());

}else{

ImgD.width(image.width());

ImgD.height(image.height());

}

ImgD.alt=image.width+"×"+image.height;

}

else{

if(image.height()>iheight){

ImgD.height(iheight);

ImgD.width((image.width()*iheight)/image.height());

}else{

ImgD.width(image.width());

ImgD.height(image.height());

}

ImgD.alt=image.width+"×"+image.height;

}

}

}

//-->

</script>

第二种需求如下:

在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。

我的需求如下:

1、预先定义好图片显示的标准宽度和高度。

2、如果图片的大小超过了标准定义,那么等比例压缩图片。

3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。

4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。

可能是我搜索的关键字不对吧,在网上找了很长时间,才找到,感觉很好使。代码如下

<script language="JavaScript">

<!--

//图片按比例缩放

var flag=false;

function DrawImage(ImgD,iwidth,iheight){

//参数(图片,允许的宽度,允许的高度)

var image=new Image();

image.src=ImgD.src;

if(image.width>0 && image.height>0){

flag=true;

if(image.width/image.height>= iwidth/iheight){

if(image.width>iwidth){

ImgD.width=iwidth;

ImgD.height=(image.height*iwidth)/image.width;

}else{

ImgD.width=image.width;

ImgD.height=image.height;

}

ImgD.alt=image.width+"×"+image.height;

}

else{

if(image.height>iheight){

ImgD.height=iheight;

ImgD.width=(image.width*iheight)/image.height;

}else{

ImgD.width=image.width;

ImgD.height=image.height;

}

ImgD.alt=image.width+"×"+image.height;

}

}

}

//-->

</script>

调用:<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

处理页面加载图片js(等比例压缩图片)

时间: 2024-12-14 06:05:55

处理页面加载图片js(等比例压缩图片)的相关文章

Android 高清加载巨图方案 拒绝压缩图片

Android 高清加载巨图方案 拒绝压缩图片

最新javascript自动按比例显示图片,按比例压缩图片显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

一段实现页面上的图片延时加载的js

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

JS 页面加载触发事件 document.ready和window.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 使用jq时一般都是这么开始写脚本的: $(function(){ // do something }); 例如: $(function() { $("a").click(function() { alert(&

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

js jquery 页面加载初始化方法

一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> <script type="text/javascript"> function init(){ // 初始化内容 } </script> // 2.window.onload=function(){} <script type="text/javascript"> window

页面加载中的图片性能优化【转】

我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,“JS和CSS是页面上最重要的部分”. 几个月后,我意识到这是错误的.图片才是页面上最重要的部分. 我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容 的展示,尤其是会影响图片的展示方式(比如