Home > Developer > JavaScript
Http://www.webdm.cn/webcode/91282981-406a-442e-bd32-6d25cf8b2d0f.html
<HTML>
<Head>
<Title> JavaScript preload the image and display the Loading Code-www.webdm.cn </title>
<Style type = "text/CSS">
Div {border: # aaaaaa 3px solid; width: 200px; padding: 2px; margin: 2px 9px; font-size: 12px; line-Height: 22px; color: #999999 ;}
. Ipt1 {width: 160px; font-size: 12px; color: #1f6478; Border: #999999 1px solid; margin-left: 9px ;}
. Ipt2 {border: #999999 1px solid; margin-left: 6px; color: #666666}
P {margin: 0px; padding: 0px; Background-image: URL (http://www.webdm.cn/images/loading.gif); background-position: center; Background-repeat: No-Repeat; width: 200px; height: 200px; text-align: center; font-size: 12px; color: #999999; line-Height: 26px ;}
</Style>
<Script language = "JavaScript" type = "text/JavaScript">
Function preloadimg (URL, OBJ, EPT ){
VaR IMG = new image ();
OBJ. innerhtml = "<p> loading images... </P> ";
IMG. onload = function () {obj. innerhtml = ""; obj. style. width = string (IMG. width) + "PX"; EPT. style. width = string (IMG. width-40) + "PX"; obj. appendchild (IMG );};
IMG. onerror = function () {obj. innerhtml = "image loading failed! "};
IMG. src = URL; // IMG. SRC must be written after IMG. onload; otherwise, problems may occur in IE.
}
Function show (){
VaR DIV = Document. getelementsbytagname ("Div") [0];
VaR input = Document. getelementsbytagname ("input ");
Preloadimg ("http://www.webdm.cn/images/wall8.jpg", Div, input [0]);
Input [0]. onclick = function () {This. value = ""};
Input [1]. onclick = function () {preloadimg (input [0]. Value, Div, input [0]);}
}
Window. onload = show;
</SCRIPT>
<Title> JavaScript image preload code, display loading </title>
</Head>
<Body>
<Div> </div>
<Br/>
<Input type = "text" value = "paste the image address here" class = "ipt1"/> <input type = "button" value = "Start loading" class =" ipt2 "/>
</Body>
</Html>
<Br/>
<A href = "http://www.webdm.cn"> Web site Code </a>-the most professional download site code-to provide quality code for Chinese webmasters!
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
