I only have to explain, img.complete means that whether the image is loaded, if you have been browser cache, then returns true. The onload method, said 1st load this picture, the browser cache had not previously had, in general, the first a visit to this page, you will trigger the onload event, the latter is triggered conplete incident. Method of execution to img.onload or complete this row will be suspended from the Executive down, waiting for images to load, but a complete, then the implementation of the function () () inside the code. Direct write a callback, said implementation of the onclick = "loadImag ( 'xxx.jpg', imgLoaded) the implementation of the first two arguments pass over method. While this method, he devoted this.width, then this this that this is a function loadImage this function, there is no width attribute, so use callback.call (AAA) to be replaced this in brackets AAA. finishes,
) function imgLoaded () (var height = this.height; var pic_height = this.height; setTimeout ( "show_pic (" + pic_height +")", 1500);)
call () a better understanding of understanding, pre-loaded images 2010-02-08 17:26 script type = "text / javascript" / / initialize the array subscript var i = 0; / / instantiate three pictures, and in immediately upon reading the page loads var img1 = new Image (); var img2 = new Image (); var img3 = new Image (); img1.src = "image/index-7.gif"; img2.src = " image/index-5.gif "; img3.src =" image/index-6.gif "; / / heat exchanger to add a picture to an array inside, that. Of course, like I do, recycling can also be used, if the picture many things var imgs = new Array (img1, img2, img3); / / This method is called when the page loads function changePic (){// access id " ad1 "the img tag, and change its src attribute of an element array document.getElementById (" ad1 "). src = imgs [i]. src; / / array subscript each plus 1 i + = 1 ; / / If the index is more than that, then by starting with 0 if (i imgs.length-1) (i = 0; / / transform a picture every 500 milliseconds setTimeout ( "changepic ()", 500); / / page loads to complete this method is called when the window.onload = changepic; / script 
These are the pre-loaded images own thoughts, there may be many problems ... welcome to point out.
var imgW = img1.width; var imgH = img1.hight; hours when we compare the picture, so that writing is not a problem. But when the image is too large, it will happen finished picture did not load went to get the problem of high width, the result is 0 啦 ... of course, is why we are here to let the code to wait for what, and so on picture to read the small call completion Zaiqu Get width and height. Look at a code written by someone else:
For instance the above example, get a picture of the effects of auto-transformation, but it shows where the picture is perhaps a TD, may be a DIV, images may also be one and one is not as big, we have the right approach is to first get the picture W 呀 high-ah, and then gave TD or a DIV, etc. to determine the width and height. So how was it, in the case, it should be
function show_pic (pic_height) (var len = pic_height/800; var pic_str =''; for (var i = 0; i len; i + +) (var top; if (i == 0) (top = 0;) else if (i Math.ceil (len) -1) (top =- 800;) else if (i == Math.ceil (len) -1) (top = 800-pic_height;) pic_str + = 'div "height: 800; overflow: hidden "img /> / script body onload = 'new_window (imgLoaded);
if (img.complete) (/ / If the picture already exists in the browser cache, directly call the callback function callback.call (img); return; / / directly return, no longer deal with onload event)
img.onload = function (){// picture download upon completion of the asynchronous call callback function. callback.call (img); / / callback function, this will be replaced with Image object)
Here to talk about the use of callback in the js, because I have not studied Ajax, is also not the time to study, perhaps this thing is widely used in the Ajax, and here only a little use to record their own experiences.
SCRIPT LANGUAGE = "JavaScript" function new_window (callback) (var img = new Image (); img.src = "(PIC)";
head script type = "text / javascript" function loadImage (url, callback) (var img = new Image ();// create an Image object, to achieve the pre-image to download img.src = url; if (img.complete) ( / / If the picture already exists in the browser cache, directly call the callback function callback.call (img); return; / / directly return, no longer deal with onload event img.onload = function (){// picture download upon completion of the asynchronous call the callback function. callback.call (img); / / the callback function, this has been replaced with Image object };};// callback method function imgLoaded () (alert (this.width); / script / head body input type = "button" value = "loadImage" onclick = "loadImag ( 'xxx.jpg', imgLoaded)" / / body which is a complete example, do not know who the original author of the -!
) function imgLoaded () (var height = this.height; var pic_height = this.height; setTimeout ( "show_pic (" + pic_height +")", 1500);)
call () a better understanding of understanding, pre-loaded images 2010-02-08 17:26 script type = "text / javascript" / / initialize the array subscript var i = 0; / / instantiate three pictures, and in immediately upon reading the page loads var img1 = new Image (); var img2 = new Image (); var img3 = new Image (); img1.src = "image/index-7.gif"; img2.src = " image/index-5.gif "; img3.src =" image/index-6.gif "; / / heat exchanger to add a picture to an array inside, that. Of course, like I do, recycling can also be used, if the picture many things var imgs = new Array (img1, img2, img3); / / This method is called when the page loads function changePic (){// access id " ad1 "the img tag, and change its src attribute of an element array document.getElementById (" ad1 "). src = imgs [i]. src; / / array subscript each plus 1 i + = 1 ; / / If the index is more than that, then by starting with 0 if (i imgs.length-1) (i = 0; / / transform a picture every 500 milliseconds setTimeout ( "changepic ()", 500); / / page loads to complete this method is called when the window.onload = changepic; / script
var imgW = img1.width; var imgH = img1.hight; hours when we compare the picture, so that writing is not a problem. But when the image is too large, it will happen finished picture did not load went to get the problem of high width, the result is 0 啦 ... of course, is why we are here to let the code to wait for what, and so on picture to read the small call completion Zaiqu Get width and height. Look at a code written by someone else:
For instance the above example, get a picture of the effects of auto-transformation, but it shows where the picture is perhaps a TD, may be a DIV, images may also be one and one is not as big, we have the right approach is to first get the picture W 呀 high-ah, and then gave TD or a DIV, etc. to determine the width and height. So how was it, in the case, it should be
function show_pic (pic_height) (var len = pic_height/800; var pic_str =''; for (var i = 0; i len; i + +) (var top; if (i == 0) (top = 0;) else if (i Math.ceil (len) -1) (top =- 800;) else if (i == Math.ceil (len) -1) (top = 800-pic_height;) pic_str + = 'div "height: 800; overflow: hidden "img /> / script body onload = 'new_window (imgLoaded);
if (img.complete) (/ / If the picture already exists in the browser cache, directly call the callback function callback.call (img); return; / / directly return, no longer deal with onload event)
img.onload = function (){// picture download upon completion of the asynchronous call callback function. callback.call (img); / / callback function, this will be replaced with Image object)
Here to talk about the use of callback in the js, because I have not studied Ajax, is also not the time to study, perhaps this thing is widely used in the Ajax, and here only a little use to record their own experiences.
SCRIPT LANGUAGE = "JavaScript" function new_window (callback) (var img = new Image (); img.src = "(PIC)";
head script type = "text / javascript" function loadImage (url, callback) (var img = new Image ();// create an Image object, to achieve the pre-image to download img.src = url; if (img.complete) ( / / If the picture already exists in the browser cache, directly call the callback function callback.call (img); return; / / directly return, no longer deal with onload event img.onload = function (){// picture download upon completion of the asynchronous call the callback function. callback.call (img); / / the callback function, this has been replaced with Image object };};// callback method function imgLoaded () (alert (this.width); / script / head body input type = "button" value = "loadImage" onclick = "loadImag ( 'xxx.jpg', imgLoaded)" / / body which is a complete example, do not know who the original author of the -!
评论