jquery图片预加载等比缩放

最新推荐文章于 2025-08-12 22:36:33 发布

转载最新推荐文章于 2025-08-12 22:36:33 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrcoke/articles/2351866.html

文章标签：

#javascript #ViewUI

本文介绍了一种用于自动调整网页图片大小并实现等比例缩放的技术，同时提供了加载中图片的显示策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 /*
 2  * Image preload and auto zoom
 3  * scaling     是否等比例自动缩放
 4  * width       图片最大高
 5  * height      图片最大宽
 6  * loadpic     加载中的图片路径
 7  * example $("*").LoadImage(true,w,h);
 8 */
 9 jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
10     if(loadpic==null)loadpic="../images/loading.gif";
11     return this.each(function(){
12         var t=$(this);
13         var src=$(this).attr("src")
14         var img=new Image();
15         //alert("Loading...")
16         img.src=src;
17         //自动缩放图片
18         var autoScaling=function(){
19             if(scaling){
20             
21                 if(img.width>0 && img.height>0){ 
22                     if(img.width/img.height>=width/height){ 
23                         if(img.width>width){ 
24                             t.width(width); 
25                             t.height((img.height*width)/img.width); 
26                             t.css("margin-top", (height-t.height())/2);
27                         }else{ 
28                             t.width(img.width); 
29                             t.height(img.height); 
30                             t.css("margin-top", (height-t.height())/2);
31                         } 
32                     } 
33                     else{ 
34                         if(img.height>height){ 
35                             t.height(height); 
36                             t.width((img.width*height)/img.height);
37                             t.css("margin-top", (height-t.height())/2);
38                         }else{ 
39                             t.width(img.width); 
40                             t.height(img.height); 
41                             t.css("margin-top", (height-t.height())/2);
42                         } 
43                     } 
44                 } 
45                 
46             }    
47         }
48         //处理ff下会自动读取缓存图片
49         if(img.complete){
50             //alert("getToCache!");
51             autoScaling();
52             return;
53         }
54         $(this).attr("src","");
55         var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />");
56         
57         t.hide();
58         t.after(loading);
59         $(img).load(function(){
60             autoScaling();
61             loading.remove();
62             t.attr("src",this.src);
63             t.show();
64             //alert("finally!")
65         });
66         
67     });
68 }