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 f100fec8c35c98e0f6a196635864e86a=1 limits the width, K13fa71b3d94b654fc7dda8880ef13631 to define the width and height of the image

The 873c4d80998f5627c84fe017b9b46671 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 873c4d80998f5627c84fe017b9b46671.

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 "1d455c0487951f640ab51b2b9deb260e between 93f0f5c25f18dab9d176bd4f6de5d30e and 9c3bca370b5104690d9ef395f2c5f8d1 ". 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)90e1350e84a8f29eab9528462a6ae8d9200) this.width=200;"align="left">, 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 873c4d80998f5627c84fe017b9b46671 into ff8b6c3e371e9f96acceec65cada5d84 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 9617a69a9711c47d4c7e5f42d8a4909e 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 9c5594a5fc8d2e506f1a8147102c836b element to pre-complete the event triggered when loading the page. Therefore, I put the Onload() event in 873c4d80998f5627c84fe017b9b46671 into 9c5594a5fc8d2e506f1a8147102c836b. 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!