Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js implementiert das Bild, um das Wort vor dem Laden anzuzeigen. Javascript-Kenntnisse

js implementiert das Bild, um das Wort vor dem Laden anzuzeigen. Javascript-Kenntnisse

WBOY
Freigeben： 2016-05-16 16:37:28
Original
1547 Leute haben es durchsucht
<html>
<title>图片预加载</title>
<body>
<script>
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);

//判断是否加载完成
function Imagess(url,imgid,callback){  
  var val=url;
  var img=new Image();
  if(Browser.ie){
    img.onreadystatechange =function(){ 
      if(img.readyState=="complete"||img.readyState=="loaded"){
        callback(img,imgid);
      }
    }    
  }else if(Browser.Moz){
    img.onload=function(){
      if(img.complete==true){
        callback(img,imgid);
      }
    }    
  }  
  //如果因为网络或图片的原因发生异常，则显示该图片
  img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
  img.src=val;
}

//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片，并且指定显示的位置
window.onload=function(){
  Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/01cf20088f9506f063d98653.jpg","img1",checkimg);
  Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg","img2",checkimg);
  Imagess("http://hiphotos.baidu.com/joanne728/pic/item/892557641806d20eaa184c71.jpg","img3",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216078845_h.jpg","img4",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216d078845_h.","img5",checkimg);
}
</script>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />
</body>
</html>
Nach dem Login kopieren
Verwandte Etiketten：
未加载 加载中
Quelle：php.cn
Vorheriger Artikel：Zusammenfassung verschiedener Methoden zum Aktualisieren der übergeordneten Seite in Javascript_Javascript-Kenntnissen Nächster Artikel：Detaillierte Erklärung von Javascript Objects_Grundkenntnisse
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen Ich habe dem Körper Ränder gegeben. main {linker Rand: 200px; rechter Rand: 200px; Textaus...
Aus 2024-04-06 22:01:35
0
3
816
Das Entity Warehouse erweitert JpaRepository<Entity, Id> und JpaSpecificationExecutor<Entity>, und EntitySpec erweitert Specification<Entity> Dies ist mein Endpunkt http://localhost:8080/country/alle Antworten sind für alle Länder i...
Aus 2024-04-06 17:11:03
0
1
421
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Möglichkeit, ASP Classic-Code als String in der MYSQL-Datenbank zu speichern Ist es möglich, klassischen ASP-Code in einer MySQL-Datenbank zu speichern und ihn beim Ab...
Aus 2024-04-06 13:38:43
0
1
358
Eine Website, die Live Server verwendet, funktioniert nicht, wenn ich sie aus einer Datei starte Ich habe mehrere Browser ausprobiert und in jedem Fall funktioniert die Website mit LiveSe...
Aus 2024-04-06 12:46:18
0
1
403
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage