How to control the image size on the Web - I have experienced everyone knowing that the colorful web page is inseparable from the support of the picture, the image has increased the vividness of the webpage, on the other hand, increase the web size, make the download speed Slow down. How to make a picture can be displayed on the page at an appropriate size and become a mystery that I can't solve.
Not long ago, I developed a teaching research website for the unit. In the news management system, in the newsletter, you need to call the image file from the database as a picture in the picture news, thereby forming a text winding form. Since the entire system includes news upload, news editing, system announcement, etc. is dynamically realized. In the development of the process, I consider the following factors: (1) as the maintainer of the website, the operation of the computer is not very skilled; (2) The website is reasonable, and the content is enriched. Therefore, for the design, the website page, the image news has a certain demand, the width of the picture, the width of this website cannot exceed 200px, even though I understand, we can use photoshop and other image processing software, you can handle the picture in advance Ok, upload it to the server, reach the same effect of the home page call, but as a user, the more hope is the simpler, so I am determined to break this problem. After a few days of fierce battle, I will constantly find the way to solve the problem, and continue to test until success. At this point, I wrote some of my experiences, and I have been engaged in the script preparation.
To make the picture display in an appropriate size, the essence is a problem with a large picture. Of course, the small picture cannot be enlarged in the web page, otherwise the image distortion will appear. How to get the size of the image through the image of the image (width, height) is the key to the problem, I will go to the online search to use JavaScript to write image equivalents, etc., and I have not worried, I finally found "adaptive picture size. The pop-up window "One article, the page effect is, click the text hyperlink, the page pops up a new window, showing pictures, where the form size is equivalent to the picture, the article is dynamically loaded with the JavaScript: Image () object, get pictures The height and width, according to the height of the source picture, the width setting pop-up window is high and width of the width of the pop-up window, and open the window, the main code is as follows:
Test one:
test </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><script language = "javaScript" type = "text / javascript"></p>
<p><! -</p>
<p>Var imgobj;</p>
<p>Function Checkimg (Turl, WinName) {</p>
<p>// Whether the object has been created</p>
<p>IF (typeof (imgobj) == "Object") {// Has a height and width of the image</p>
<p>IF (IMGOBJ.WIDTH! = 0) && (imgobj.height! = 0)))</p>
<p>/ / Open the height and width of the pop-up window according to the acquired image height and width, and open the window</p>
<p>// The increments 20 and 30 are the spacer between the settings of the window border and the picture.</p>
<p>OpenFullsizeWindow (Turl, WinName, ", Width =" (IMGOBJ.WIDTH 20) "Height =" (IMGOBJ.HEIGHT 30);</p>
<p>Else</p>
<p>// Because the image is dynamically loaded by the image object, it is impossible to get the width and height of the picture immediately, so repeat the call check every 100 milliseconds.</p>
<p>Settimeout ("Checkimg ('" theurl ",'" winname "" ", 100)</p>
<p>}</p>
<p>}</p>
<p>Function OpenFullsizeWindow (Turl, WinName, Features) {</p>
<p>Var anewwin, sbasecmd;</p>
<p>// pop up the window appearance parameters</p>
<p>Sbasecmd = "Toolbar = no, location = no, status = no, menubar = no, scrollbars = no, resizable = no,"</p>
<p>/ / Call from Checkimg</p>
<p>IF (Features == Null || features == "") {</p>
<p>// Create an image object</p>
<p>IMGOBJ = new image ();</p>
<p>/ / Set the image source</p>
<p>IMGOBJ.SRC = theurl;</p>
<p>/ / Start getting image size</p>
<p>Checkimg (THEURL, WINNAME)</p>
<p>}</p>
<p>Else {</p>
<p>// Open the window</p>
<p>Anewwin = window.open (Theurl, WinName, Sbasecmd Features);</p>
<p>/ / Focus window</p>
<p>Anewwin.focus ();</p>
<p>}</p>
<p>}</p>
<p>// -></p>
<p></ script></p>
<p><a href="bt0085.jpg" onclick="openfullsizeWindow(th.href ,'','' );return false"> Picture test </A></p>
<p></ body></p>
<p></ html></p>
<p>With image () objects to get the width, Height, I know how to solve how to achieve the proportional zoom problem that implements image. So, I use K = Width / Height to represent the proportional value of the image, when K> = 1, indicates width> heght, as long as Width does not exceed 200px, Height must <= 200px; opposite K <1, as long as height does not exceed 150px, width must <= 150px (Width / height = 4: 3). Therefore, as long as K> = 1 defines width, K <1 defines Height. With the help of the test one, I will soon have the following code (test 2):</p>
<p>Test two</p>
<p><script language = "javascript" type = "text / javascript"> <!</p>
<p>Var imgobj;</p>
<p>Function checkimg (theurl) {</p>
<p>Var Width;</p>
<p>VAR K;</p>
<p>IMGOBJ = new image ();</p>
<p>IMGOBJ.SRC = theurl;</p>
<p>IF (IMGOBJ) == "Object") {</p>
<p>IF (IMGOBJ.WIDTH! = 0) && (imgobj.height! = 0)))</p>
<p>{width = imgobj.width;</p>
<p>Height = imgobj.height;</p>
<p>K = width / height;</p>
<p>Document.write (k);</p>
<p>IF (k> = 1) {</p>
<p>IF (width> = 200) {</p>
<p>Width = 200;</p>
<p>Height = width / k;</p>
<p>}</p>
<p>Else</p>
<p>{IF (Height> = 200) {</p>
<p>HEIGHT = 200;</p>
<p>Width = k * height;</p>
<p>}</p>
<p>}</p>
<p>Showimg (Turl, Width, Height);</p>
<p>}</p>
<p>Else</p>
<p>SetTimeout ("Checkimg ('" theurl "" ", 100)</p>
<p>}</p>
<p>}</p>
<p>Function showimg (theurl, x, y)</p>
<p>{</p>
<p>Document.write ("<imgsrc =" theurl "" "width =" "" "height =" "" border = '0' " " "Align = 'LEFT'");</p>
<p>}</p>
<p>// -></p>
<p></ script></p>
<p><script language = "javascript"></p>
<p>Checkimg ("bt0085.jpg");</p>
<p></ script></p>
<p>Test passed! I am happy, immediately transplant the code into the home file (Default.asp), then test through the server, the result When I entered the URL, the browser has handled the post-moving picture, I suddenly Dumbent, obviously I run the home file, but the result appears pictures. In addition, I found that the browser toolbar "Back" tool is available, I click "Back", and this time the page content appears. Test again, the result is normal. After repeated test, I found the same phenomenon when I updated the picture, and the same problem occurred while I opened a computer that did not have visited this website. I am more confused, I can't understand. Why is this phenomenon? I thought a lot of programs, and the results failed during testing.</p>
<p>In anxious, I went to the Internet to check the characteristics of the image () object, mainly to implement picture roll effect, download the picture to the client in advance, so that the switch between the pictures does not have time delay. Like the code below, use the Image object's SRC property to specify the path (URL) of the image, then download the image Pic2.gif in the images directory to the client:</p>
<p>Var myimg = new image ();</p>
<p>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 cover it, then when the user When moving the mouse to the image, the picture will change immediately without time delay. So if the first time the picture is displayed, the home file will be displayed normally. This is this reason. Thus, I conclude that IMAGE () objects can be used to obtain an image of the image, and the solution to solve the problem should be changed.</p>
<p>I checked a lot of books about JavaScript, and there was a book to write "the beating" special effects of the "Figure": "The <IMG> element of the page can define its display range, the height height and width of the figure (Width ). When handling event trigger, the two properties of dynamically change the figure can achieve effect; "According to the prompt, I quickly completed the test three code, the main code is as follows:</p>
<p>Test three</p>
<p><script></p>
<p>Function show ()</p>
<p>{var w, h;</p>
<p>VAR K;</p>
<p>VAR CON;</p>
<p>W = smallslot.width;</p>
<p>H = smallslot.height;</p>
<p>K = W / h;</p>
<p>IF (k> = 1) {</p>
<p>IF (w> = 200) {</p>
<p>W = 200;</p>
<p>H = w / k;</p>
<p>}</p>
<p>Else</p>
<p>{IF (h> = 150) {</p>
<p>H = 150;</p>
<p>W = k * h;</p>
<p>}</p>
<p>}</p>
<p>Return W;</p>
<p>}</p>
<p></ script></p>
<p><img border = 0 id = "smallslot" src = "4.jpg" οnlοad = "javascript: width = x;" Align = "Left"></p>
<p><script language = "javascript"></p>
<p>VAR x = show ();</p>
<p>// Document.write (x);</p>
<p></ script></p>
<p>In this code, I take into account the ID in <img>, you can define the width and height of the figure, as long as the width of the image can be controlled, the equivalence display can be implemented in the web preview (high degree of width changes) So I will process the width of the post-image as the return value of the show () function. Call the image of the image with an onload event in <img>. I will test again, pass! Transplant it again to the home code, tested again, then the problem appears again: Home on the picture news is actually no display. I click on the "Go to" button in the address bar, this picture can be displayed normally. Practice tells me another failure! Because the only habit of the Internet is to do it, type the input URL, type the two actions entering these.</p>
<p>On this basis, I did the following attempts:</p>
<p>(1), <head> </ head> <meta http-equiv = "refresh" content = "10; url = default.asp"> Allows to automatically refresh the screen 10 seconds, the result picture can be displayed normally, but Continuously brushing the screen makes the visual uncomfortable.</p>
<p>(2) Window.Location.Reload () Re-loads the page, but the result is that the page cannot be displayed correctly during the loading page.</p>
<p>(3), <img src = 1.jpg border = 0 online = "JavaScript: if (this.width> 200) this.width = 200;" Align = "left", test can pass, but if the image width <HEIGHT, and Width> 200px, the page display effect is high than 150, so if there is no binding of k = width / height, the page effect is unreasonable, so it is not possible. I have a little bit of talents, I can't find a better way to solve this problem, gradually lose my confidence, I haven't slept for this question, I am going to have the last fight. I carefully analyze my test three. I found that the main reason is that the online event is an event triggered when the page is loaded. Onload is used in <img> element, when IE explains here, load page can trigger "JavaScript: width = x;"</p>
<p>Therefore, you have to reload the page to display the picture. Also, I know that online () is generally used in the <body> element, and the event that triggered when the loaded page is completed. So, I will put the onload () event in <img>, and the code is as follows:</p>
<p>Test four:</p>
<p><body οnlοad = "window.smallslot.width = show ();>>>>>></p>
<p><script></p>
<p>Function show ()</p>
<p>{var w, h;</p>
<p>VAR K;</p>
<p>VAR CON;</p>
<p>W = smallslot.width;</p>
<p>H = smallslot.height;</p>
<p>K = W / h;</p>
<p>IF (k> = 1) {</p>
<p>IF (w> = 200) {</p>
<p>W = 200;</p>
<p>H = w / k;</p>
<p>}</p>
<p>Else</p>
<p>{IF (h> = 150) {</p>
<p>H = 150;</p>
<p>W = k * h;</p>
<p>}</p>
<p>}</p>
<p>Return W;</p>
<p>}</p>
<p></ script></p>
<p><img border = 0 id = "smallslot" src = "1.jpg" align = "left"> this is a test!</p>
<p>Test again, pass it! And the home call is successful! I succeeded!</p>
<p>After this experience, I felt hard and fun engaged in the development of procedures! Sometimes for a small problem to toss tea meal, but successful joy is a saying. Anything as long as you can study hard, persevere, believe that the problem will always be solved.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-117551.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="117551" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'yrWrAj9yERxFQiBAx1XdoY7_2B9schjoGjSfJT9cX_2B13zU_2BkoGaEM1YPjgXGK_2Be_2BIrs_2B9zmh9apGmhxzcLW4zRTg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
