How javascript scales and optimizes Images

This morning, a customer contacted me and said that the website I just created for him showed abnormal, and I was suddenly nervous. This was my first independent project, so I quickly opened his website and looked at it. I didn't see anything unusual. I asked him why he was abnormal. He said that the effect was different when the project was handed over, and he was dizzy. If the project was not handed over normally, the project would definitely fail to be handed over. Let him just cut a picture. It is really not normal. It is a picture he just uploaded that opened the window of the displayed content. Check the code and write max-width clearly. How can this problem still occur. Suddenly I found out that the browser was not pleasing to the eye, like the old and holy IE6! After confirmation, it is indeed it, and it is it again! I am so negligent that I did not give him a test in IE6 and I will be handed in.

Speaking of IE6, we are really the frontend guys who hate and are helpless, and many attributes are not supported. But many users are still using it, and we cannot ignore it. In order to be compatible, I had to ask my colleagues, and then used js scaling to display the image for IE6 and optimized the image in some details.

Although the customer's website is relatively small today and does not have high requirements on website performance, it is a long-term learning process to optimize these things, I have read some articles, saying that if the onload method of the img label is used to call the function to modify the size, the performance will be greatly affected. In addition, the use of-expression behavior does not seem to be available for further verification). Therefore, it is triggered when the page is loaded.

 
 

  
  
function resizeImage(img,width){   
  
  
var image=new Image();   
  
  
image.src=img.src;   
  
  
var temp = image.width;   
  
  
img.width = temp = (temp>width)?width:temp;   
  
  
img.style.display = "inline";   
  
  
}   
  
  
function doResize(){   
  
  
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});   
  
  
}   
  
  
window.onload = doResize; 
 
 

This Code uses the resizeImage function to determine and modify the img. the width attribute has a simple principle. Before this code, I added a judgment on the IE 6 browser. In addition to this, I still asked CSS to set the image size. I didn't define the height and width of the image in the Code. In this way, when scaling, you only need to modify one of the values to make the other values adaptive, instead of letting js execute proportional scaling, this is a little bit of optimization. I reference Jquery in the code because I am used to it). You don't need to do this. The reason why I write this is that the function can be processed uniformly after the DOM element is returned. Considering that customers often use images with external links, the display speed of webpages is affected by the image source. Therefore, when loading a page, I first use CSS to hide the images to be displayed, after the image is scaled, The js method is used to display the image. Therefore, IE6 is hack:

 
 

  
  
img{   
  
  
display:inline !important;   
  
  
display:none;   
  
  
max-width:180px;   
  
  
}