Use javascript to solve image scaling and optimization code_image special effects

A client contacted me and told me that the website he had just built was not displaying properly. I immediately became nervous. This was the first project I had completed independently, so I quickly opened his website and looked at it. I didn’t see anything abnormal. Come. I asked him again why it was abnormal, and he said it was different from the effect when handing over the project. Haha, if it was abnormal during the handover, the project would definitely not be handed over. I might as well ask him to take a screenshot. Sure enough, it was abnormal. It was a picture he had just uploaded that opened the window displaying the content. Looking at the code, it is clear that max-width has been written, so why does this situation still occur? Suddenly I found that the browser in the picture he sent looked unpleasant, like the ancient and sacred IE6! After confirmation, it was indeed it, and it was it again! I was really negligent and handed over the work without testing it under IE6.

Speaking of IE6, those of us who are doing front-end work are really annoyed and helpless because many attributes are not supported. But many users are still using it, and we cannot ignore it. For the sake of compatibility, I had to ask my colleagues for advice, and then used js scaling to display images for IE6 and made some detailed optimizations.

Although today’s client website is relatively small and does not have high requirements for website performance, I consider that these things may be used in the future. Optimization is a long-term learning process. I checked some articles and said If you use the onload method of the img tag to call a function to modify the size, it will have a greater impact on performance. In addition, using -expression behavior seems not advisable (will continue to verify it later), so in the end it is triggered when the page is loaded.

Copy code The code is as follows:

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.width attribute. The principle is relatively simple. In front of this code, I also added a judgment for the IE6 browser. In addition to it, I still let CSS determine the size of the image. I did not define the height and width of the image in the code, so when scaling, I only need to modify one of the values ​​and let the other value adapt, instead of letting js perform equal-ratio scaling. This is also a little bit of optimization. Bar. I quoted Jquery in the code (because I'm used to it). You don't need to do this. The reason why I wrote it this way is that after the DOM element is returned, the function can be processed uniformly. Considering that customers often use images from external links, at this time, the display speed of the web page is affected by the image source, so when the page is loaded, I first use CSS to hide the images that need to be displayed, and then use the js method after the image is scaled. To display images, I made another hack for IE6:

Copy the code The code is as follows:

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