SoFunction
Updated on 2025-02-28

JS implements the image to display the loading words before it is not loaded

JS implements the image to display the loading words before it is not loaded

Updated: September 3, 2014 17:57:48 Submission: whsnow
First, determine whether the image is loaded and then determine whether it is loaded. If it has not been loaded, it will display "Loading...". The ideas and code are as follows
<html>
<title>Image preload</title>
<body>
<script>
//Judge browservar Browser=new Object();
=();
=/msie/.test();
=/gecko/.test();

//Judge whether the loading is completedfunction Imagess(url,imgid,callback){  
  var val=url;
  var img=new Image();
  if(){
     =function(){ 
      if(=="complete"||=="loaded"){
        callback(img,imgid);
      }
    }    
  }else if(){
    =function(){
      if(==true){
        callback(img,imgid);
      }
    }    
  }  
  //If an abnormality occurs due to the network or picture, the picture will be displayed  =function(){='/img/baidu_logo.gif'}
  =val;
}

//Show picturesfunction checkimg(obj,imgid){
(imgid).src=;
}
//Initialize the picture to be displayed and specify the display location=function(){
  Imagess("/lovebyakuya/pic/item/","img1",checkimg);
  Imagess("/lovebyakuya/pic/item/","img2",checkimg);
  Imagess("/joanne728/pic/item/","img3",checkimg);
  Imagess("/-/res/Camilla/20071204181216078845_h.jpg","img4",checkimg);
  Imagess("/-/res/Camilla/20071204181216d078845_h.","img5",checkimg);
}
</script>
<img  src="" width="100" height="100" />
<img  src="" width="100" height="100" />
<img  src="" width="100" height="100" />
<img  src="" width="100" height="100" />
<img  src="" width="100" height="100" />
</body>
</html>
  • Not loaded
  • loading

Related Articles

  • Native js achieve mouse follow-up effect

    This article mainly shares examples of native js implementing mouse follow-up effects, which have good reference value. Let’s take a look at it with the editor below.
    2017-02-02

  • WeChat applet implementation message board (Storage)

    This article mainly introduces the message board for WeChat mini-program implementation, which has certain reference value. Interested friends can refer to it.
    2018-11-11

  • Detailed analysis of CSS attributes for JS batch operations

    This article mainly introduces JS batch operation CSS properties. Friends who need it can come and refer to it, I hope it will be helpful to everyone
    2013-12-12

  • Javascript canvas achieve raindrop effect

    This article mainly introduces the implementation of the raindrop effect of javascript canvas in detail. The sample code in the article is introduced in detail and has certain reference value. Interested friends can refer to it.
    2021-06-06

  • Redmi mobile phone snap-up js code

    This article mainly introduces the js code returned when Redmi mobile phones are rushing for purchases. It can be used when making Redmi mobile phones. Friends who need it can refer to it.
    2014-03-03

  • Detailed explanation of the process of creating floor navigation effects of JavaScript

    There are more document content in the project. In order to facilitate the search for small content, a fixed floor navigation bar will be placed on the left or right. Today, let’s talk about the ideas and implementation methods of this fixed floor navigation bar.
    2021-10-10

  • div+css+js simulates tab switching effect Event binding IE, firefox compatible

    div+css+js simulate tab, in this version, theoretically, you can add unlimited tabs, and you only need to control the content adding line, you don't need to change JS
    2009-12-12

  • Javascript click anywhere else to hide and close DIV instance

    This article mainly shares a Javascript click anywhere else to hide and close the DIV instance. Friends who need it can refer to it.
    2016-06-06

  • The pitfalls and solutions in uni-app

    This article mainly introduces the pitfalls and solutions that have been touched in uni-app, which is of good reference value and hopes to be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2023-04-04

  • JavaScript to get selected text in text box

    This article mainly introduces the method of JavaScript to obtain text selection in the text box. It analyzes the examples of JavaScript's skills in obtaining text selection in the text box through onclick. It has certain reference value. Friends who need it can refer to it.
    2015-02-02

Latest Comments