jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法。分享給大家供大家參考,具體如下:
要改變圖片的大小并不難,可以用jQuery操作css改變。但是前提是要判斷圖片是否加載完成。主要是通過(guò)jQuery的load事件和onreadystatechange來(lái)判斷其狀態(tài)。
對(duì)于IE6,用onreadystatechange可以直接處理,在IE7中,則需要用定時(shí)器來(lái)判斷圖片的readystate狀態(tài)。而對(duì)于FF和Chrome剛可以直接用load事件來(lái)判斷。
以下是在實(shí)例中使用的完整代碼:
<script type="text/javascript">
$(document).ready(function(){
function changeSize(obj){
//本函數(shù)用于在圖片加載時(shí)對(duì)圖片大小等進(jìn)行設(shè)置
w=obj.width();
h=obj.height();
t=obj.attr("title");
src=obj.attr("src");
obj.width(w>400?400:w);
obj.height(w>400?(400/w)*h:h);
obj.css("cursor","pointer");
obj.click(function(){
$("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({
width:"auto",
height:"auto",
title:t,
modal:true,
draggable:false,
resizable:false
})
})
}
if($.browser.msie){
//IE 6.0
if($.browser.version==6.0){
$(".bodyLeft img").each(function(ind,ele){
// ele.onreadystatechange =function(){
if(ele.readyState == "complete"||ele.readyState=="loaded"){
changeSize($(this));
}
//}
})
}
//IE 6.0以上
else{
$(".bodyLeft img").each(function(){
tempTimer=window.setInterval(function(ind,ele){
if(ele.readyState=="complete"){
window.clearInterval(tempTimer);
changeSize($(this));
}
else{
return;
}
},200);
})
}
}
//FF,Chrome
else{
$(".bodyLeft img").each(function(ind,ele){
alert(ele.complete);
if(ele.complete==true){
changeSize($(this));
}
})
}
})
</script>
上面的圖片可以將圖片等比例縮小顯示在文章中,同時(shí)使用的jQuery的Dialog UI組件單擊圖片時(shí),以一個(gè)層顯示完整大小的圖片。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery限制圖片大小的方法
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- 基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
- jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
- 使用jQuery清空f(shuō)ile文件域的解決方案
- jquery(live)中File input的change方法只起一次作用的解決辦法
- jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
- jQuery獲取file控件中圖片的寬高與大小
相關(guān)文章
Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼
Bootstrap插件非常的好用了,今天小編通過(guò)本教程給大家介紹Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09
ajax異步刷新實(shí)現(xiàn)更新數(shù)據(jù)庫(kù)
下面寫(xiě)關(guān)于如何把無(wú)刷新的數(shù)據(jù)寫(xiě)入到數(shù)據(jù)庫(kù)中,需要的朋友可以參考下2012-12-12
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格
下面小編就為大家?guī)?lái)一篇淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery使用bind動(dòng)態(tài)綁定事件無(wú)效的處理方法
今天小編就為大家分享一篇關(guān)于jQuery使用bind動(dòng)態(tài)綁定事件無(wú)效的處理方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對(duì)jQuery中的deferred還不了解,jQuery的deferred對(duì)象詳解一文接下來(lái)介紹deferred對(duì)象如何實(shí)現(xiàn)異步順序加載JS文件,感興趣的你可以參考下哈2013-03-03
jquery如何把數(shù)組變?yōu)樽址畟鞯椒?wù)端并處理
這篇文章主要介紹了jquery如何把數(shù)組變?yōu)樽址畟鞯椒?wù)端并處理,需要的朋友可以參考下2014-04-04
jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)
這篇文章給大家介紹了jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-05-05
JQuery 風(fēng)格的HTML文本轉(zhuǎn)義
astinus開(kāi)發(fā)過(guò)程中,我自己就在不斷的使用。有次貼了一些JS代碼進(jìn)去,于是頁(yè)面顯示錯(cuò)誤。顯然,把源代碼直接放進(jìn)html文本了——好吧,從05年轉(zhuǎn)去做網(wǎng)游以后,一直沒(méi)有正經(jīng)的做過(guò)web了。2009-07-07

