Detailed explanation of how JavaScript uses three methods to modify image size

As we all know, colorful Web network courseware is inseparable from the support of images. While images increase the vividness of web pages, they also increase the size of web pages and slow down the download speed. How to make a picture display on the page in an appropriate size on a website is a question worth studying. To this end, the author has written down some of his own experiences for the reference of script writers, so as to encourage each other.

Requirements analysis: This website uses a news management system. In the news column on the homepage, image files need to be called from the database as pictures in the picture news, thus forming a text wrapping form. According to layout needs, the width of the image cannot exceed 200px.

The problem of allowing images to be displayed at appropriate sizes is essentially a problem of scaling down large images in equal proportions. How to obtain the size (width, height) of the image through the URL of the image is the key to the problem. Assume that k=Width/Height represents the proportion value of the image. When K>=1, as long as the width does not exceed 200px, the height must be <= 200px; on the contrary, K<1, as long as the Height does not exceed 150Px, the width must be <=150px (under normal circumstances, width:height=4:3). So as long as K>=1 limits the width, K<1 limits the height.

Option 1: Use the Image() object of javascript to dynamically load the image and obtain the height and width of the image.

<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();    
//创建对象；
imgObj.src = theURL;   
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；       
height=imgObj.height; 
//是否已取得了图像的高度；      
 k=width/height; 
 //获取图像比例值；        
 if(k>=1){         
 if (width>=200){          
 width=200;          
 height=width/k;         
 }}        
 else                
 {if (height>=200){          
 height=200;           
 width=k?height;           
 }          
 }
 showimg(theURL,width,height);       
 }   
 else    
 setTimeout("checkImg(&#39;" + theURL + "&#39;)", 100) 
 //通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
 }
 }
 functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border=&#39;0&#39;"+""+"align=&#39;left&#39;>");}   //-->
 </script>
 <scriptlanguage="javascript">checkImg("Bt0085.jpg");
 </script>

Result: The code was transplanted to the home page file (default.asp), and then a problem occurred when it passed the server test. When entering the URL, the processed image first appears in the browser. Click "Back" on the toolbar to display the homepage content. Tested again and the result was normal. The same phenomenon will occur every time the picture is updated, or the same problem will occur every time a computer that has not visited this website is opened.

Cause analysis: The characteristics of the Image() object are mainly used to achieve the image rolling effect. The images can be downloaded to the client in advance, so that there is no time delay in switching between images. As in the code below, use the src attribute of the Image object to specify the path (URL) of the image, so that the image pic2.gif in the images directory is downloaded to the client. var myImg = newImage();myImg.src = "pic.gif";

This code will force the browser to start downloading the specified image from the server, if there is this image in the client's cache (Cache) , the browser will automatically overwrite it. That way, when the user moves the mouse over the picture, the picture will change immediately without any time delay. So if the picture is displayed for the first time, the homepage file can be displayed normally the second time. This is the reason. From this, I came to the conclusion that the Image() object cannot be used to obtain the properties of the image, and the solution to the problem should be changed.

Option 2: Use the ID in to define the width and height of the image

The element of the page can define its display range, that is, the height and width of the image (Width). When the processing event is triggered, the effect can be achieved by dynamically changing the two properties of the graph.

<script>
functionshow()   
{var w,h;   
var k;   
var con;  
w=smallslot.width;  
 h=smallslot.height;   
 k=w/h;  
 if(k>=1){         
 if (w>=200){           
 w=200;          
 h=w/k;         
 }}         
 else                
 {if(h>=150){           
 h=150;          
  w=k?h;          
  }           
  }       
  return w;
  }
  </script>
  <imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
  <script languge="javascript">      
   varx=show();   
   </script>

In this code, the width of the processed image is used as the return value of the show() function. Use the onload event to call the Width of the image in .

Problem: The pictures in the picture news on the homepage are not displayed. Click the "Go" button in the address bar to display them normally. Practice tells me another failure! Because the only thing Internet users are used to doing is entering the URL and typing Enter. On this basis, the author made the following attempts: (1) Add " between and ". The screen is automatically refreshed every 10 seconds. As a result, the picture can be displayed normally, but the constant refreshing of the screen makes it very uncomfortable. (2) window.location.reload() reloads the page, but the result is that it is always in the process of loading the page, so that the webpage cannot be displayed correctly. (3), the test can pass, but if the image width< height, and width>200px, the page display effect will be that the height exceeds 150. In this way, if there is no constraint of K=width or K=height, the page effect is unreasonable, so it cannot be used.

Option 3: Put the Onload() event in into to trigger the event when the page is loaded

After carefully analyzing the option 2, the author found that the main The reason is that the onload event is an event triggered when the page is loaded. Onload is used in the element. When IE interprets it here, the page needs to be loaded to trigger "javascript:width=x;", so the page needs to be reloaded to display the image. In addition, Onload() is generally used in the element to pre-complete the event triggered when loading the page. Therefore, I put the Onload() event in into . The code is as follows:

<body onload="window.smallslot.width=show();">
<script>       
function show()           
{…..
//show()       
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest!　

　再次测试，通过了，而且首页调用成功！我成功了！　　经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。

The above is the detailed content of Detailed explanation of how JavaScript uses three methods to modify image size. For more information, please follow other related articles on the PHP Chinese website!