As we all know, a variety of web pages are inseparable from the support of images. Images increase the vividness of web pages and increase the size of web pages, slowing down the download speed. How to make an image display on a page of an appropriate size becomes a mystery that cannot be solved for a moment.
Not long ago, I developed a website for teaching and research, using a news management system. In the news section on the homepage, I needed to call image files from the database as images in the picture news, to form a text winding form. The entire system includes news uploading, news editing, and system announcements. In the development process, I have taken into account the following factors: (1) as the website maintainer, I am not very familiar with computer operations; (2) the website layout is reasonable and the content is enriched. Therefore, for the purpose of design, the width and height of the pictures on the website page must be limited to PX, although I understand that, we can use Photoshop and other image processing software to process images in advance and then upload them to the server to achieve the same effect of homepage calling, but as a user, what I hope most is that the simpler the operation, the better, so I am determined to break this problem. After several days of fierce competition, I kept looking for ways to solve the problem and continuously testing until it was successful. So far, I have written some of my experiences for the reference of many script writers.
To enable images to be displayed in an appropriate size, it is actually a matter of narrowing down the proportion of a large image. Of course, small images cannot be enlarged and displayed on webpages; otherwise, image distortion may occur. How to obtain the image size (width, height) through the image URL is the key to the problem. I went online to search for the possibility of using JavaScript to write images and scale proportionally, finally, find the article "adaptive image size pop-up window". The page effect is: Click the text hyperlink, a new window is displayed, showing the image. The form size is the same as the image size, in this article, javascript: image () objects are used to dynamically load images to obtain the image height and width, set the height and width of the pop-up window based on the height and width of the source image. The main code is as follows:
Test 1:
<HTML>
<Head>
<Meta http-equiv = Content-Type content = text/html; charset = gb2312>
<Meta name = generator content = Microsoft FrontPage 4.0>
<Meta name = progid content = FrontPage. Editor. Document>
<Title> test </title>
</Head>
<Body>
<Script language = JavaScript type = text/JavaScript>
<! --
VaR imgobj;
Function checkimg (theurl, winname ){
// Whether the object has been created
If (typeof (imgobj) = Object ){
// Whether the image height and width have been obtained
If (imgobj. Width! = 0) & (imgobj. height! = 0 ))
// Set the height and width of the pop-up window based on the obtained image height and width, and open the window
// Increment 20 and 30 indicate the interval between the window border and the image.
Openfullsizewindow (theurl, winname, width = + (imgobj. Width + 20) +, Height = + (imgobj. height + 30 ));
Else
// Because the image is dynamically loaded through the image object, it is impossible to get the image width and height immediately, so the check is repeated every 100 milliseconds.
SetTimeout (checkimg ('+ theurl +', '+ winname +'), 100)
}
}
Function openfullsizewindow (theurl, winname, features ){
VaR anewwin, sbasecmd;
// Display parameters
Sbasecmd = toolbar = No, location = No, status = No, menubar = No, scrollbars = No, resizable = No ,;
// Whether the call is from checkimg
If (features = NULL | features = ){
// Create an image object
Imgobj = new image ();
// Set the image source
Imgobj. src = theurl;
// Start to get the image size
Checkimg (theurl, winname)
}
Else {
// Open the window
Anewwin = Window. Open (theurl, winname, sbasecmd + features );
// Focus window
Anewwin. Focus ();
}
}
// -->
</SCRIPT>
<A href0000bt0085.jpg onclick = openfullsizewindow (this. href, '',''); Return false> image test </a>
</Body>
</Html>
With the image () object to obtain the width and height of the image, I will know how to solve the proportional Scaling Problem of the image. Therefore, I use k = width/height to represent the proportional value of the image. When k> = 1, it indicates width> heght. 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 (normally, width/Height = ). So as long as K> = 1 limits width, k <1 limits height. With the help of test 1, I quickly got the following code (Test 2 ):
Test 2
<Script language = JavaScript type = text/JavaScript>
<! --
VaR imgobj;
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;
Document. Write (k );
If (k> = 1 ){
If (width> = 200 ){
Length = 200;
Height = width/K;
}}
Else
{If (height> = 200 ){
Height = 200;
Width = K * height;
}
}
Showimg (theurl, width, height );
}
Else
SetTimeout (checkimg ('+ theurl +'), 100)
}
}
Function showimg (theurl, x, y)
{
Document. Write ( );
}
// -->
</SCRIPT>
<Script language = JavaScript>
Checkimg(bt0085.jpg );
</SCRIPT>
Test passed! I was so ecstatic that I immediately transplanted the code to the homepage file (default. ASP), and then through the server test, the results when I enter the URL, the browser has been processed in the picture, I suddenly dumb, clearly I run the home page file, the image is displayed. In addition, I found that the "back" tool is available in the browser toolbar, And I clicked "back". At this time, the content on the home page appears. Test again and the result is displayed normally. After repeated tests, I found that the same phenomenon occurs every time I update images. In addition, each time I open a computer that has not accessed this website, the same problem occurs. I am getting confused and confused. Why? I thought about a lot of solutions and the results all failed during the test.
In a hurry, I went online to check the features of the image () object, mainly used to achieve the image tumble effect, and can download the image to the client in advance, so that there is no time delay for switching between images. The following code uses the src attribute of the image object to specify the image path (URL). In this way, the image pic2.gif under the images directory is downloaded to the client:
VaR myimg = new image ();
Myimg. src = pic.gif;
This code will force the browser to start downloading the specified image from the server. If the client cache contains this image, the browser will automatically overwrite it, when you move the mouse over an image, the image changes immediately without any delay. This is why the homepage file is displayed normally for the second time after the image is displayed for the first time. As a result, I come to the conclusion that the image attributes cannot be obtained using an image () object, and the solution to the problem should be changed.
I checked a lot of books on JavaScript. When I wrote the special effect "Graph beating" in a book, I wrote: "The element of the page can define its display range, that is, the height and width of an image ). When an event is triggered, the two attributes of the graph can be dynamically changed to achieve the effect. "According to the prompts, I quickly completed the code for Test 3. The main code is as follows:
Test 3
<SCRIPT>
Function show ()
{Var W, h;
VaR K;
VaR con;
W = smallslot. width;
H = smallslot. height;
K = W/h;
If (k> = 1 ){
If (W & gt; = 200 ){
W = 200;
H = W/K;
}}
Else
{If (h> = 150 ){
H = 150;
W = K * h;
}
}
Return W;
}
</SCRIPT>
<SCRIPT merge Ge = JavaScript>
VaR x = show ();
// Document. Write (X );
</SCRIPT>
In this Code, I considered using the ID in to define the width and height of the image, as long as the image width can be controlled, you can achieve proportional display in Web Preview (the height varies with the width), so I will use the width of the processed image as the return value of the show () function. In , the onload event is used to call the width of the image. I passed the test again! Try again in the homepage code and test again. The problem occurs again: the pictures in the homepage news are not displayed. I click the "go to" button in the address bar, and the image will be displayed normally. My practice tells me that I failed again! Because the only habit of netusers is to enter the URL and press Enter.
On this basis, I made the following attempts:
(1) <meta http-equiv = Refresh content = 10; url = default. asp>. the screen is automatically refreshed every 10 seconds, and the result image can be displayed normally, but the screen is constantly refreshed, making the visual uncomfortable.
(2) window. Location. Reload () re-load the page, but the result is always in the process of loading the page, so that the page cannot be correctly displayed.
(3) 200) This. width = 200; align = left>, test can pass, but if the image width
I felt a little poor. I couldn't find a better solution to this problem, and gradually lost confidence. For this problem, I was not asleep for two nights. I was ready to fight for the last time. I carefully analyzed test 3 and found that the onload event is triggered during page loading. Onload is used in the element. When ie explains this, the page needs to be loaded to trigger "javascript: width = X;
Therefore, you must reload the page to display images. In addition, I know that onload () is generally used in the <body> element to trigger events when page loading is completed in advance. Therefore, I put the onload () event in to <body>, and the code is as follows:
Test 4:
<Body onload = Window. smallslot. width = show ();>
<SCRIPT>
Function show ()
{Var W, h;
VaR K;
VaR con;
W = smallslot. width;
H = smallslot. height;
K = W/h;
If (k> = 1 ){
If (W & gt; = 200 ){
W = 200;
H = W/K;
}}
Else
{If (h> = 150 ){
H = 150;
W = K * h;
}
}
Return W;
}
</SCRIPT>
This is a test!
Test again, passed! The homepage is called successfully! I succeeded!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
