JS implementiert das Vorladen von Bildern ohne Wartezeit

Bei der Entwicklung von Websites ist es häufig erforderlich, eine große Anzahl von Bildern auf einer bestimmten Seite zu durchsuchen. Wenn der Datenverkehr berücksichtigt wird, kann jede Seite wie bei pconline nur ein Bild anzeigen, sodass Benutzer es bei jedem Aufruf erneut herunterladen müssen ein Bild. Klicken Sie auf die gesamte Seite. Im Web2.0-Zeitalter sind jedoch immer mehr Menschen bereit, JavaScript zur Implementierung eines Bildbrowsers zu verwenden, sodass Benutzer andere Bilder sehen können, ohne zu lange warten zu müssen.

Nachdem Sie die Adresse eines Bildes kennen, müssen Sie es in einem HTML-Container mit fester Größe anzeigen (kann ein Div usw. sein). Das Wichtigste ist natürlich, die Breite und Breite zu kennen Stellen Sie die anzuzeigende Bildhöhe ein und kombinieren Sie dann die Breite und Höhe des Containers, um das Bild entsprechend einem bestimmten Skalierungsverhältnis anzuzeigen. Daher ist das Vorladen von Bildern zur Kernfunktion von Bildbrowsern geworden.

Freunde, die Bildspiegelungseffekte durchgeführt haben, wissen tatsächlich, dass es am besten ist, die Bilder lokal herunterzuladen und sie vom Browser zwischenspeichern zu lassen, um Wartezeiten beim Drehen von Bildern zu vermeiden. Derzeit wird im Allgemeinen das Image-Objekt in js verwendet. Die allgemeine Methode ist nichts weiter als diese:

Kopieren Sie den Code wie folgt:

function preLoadImg(url) { 
var img = new Image(); 
img.src = url; 
}

Durch Aufrufen der preLoadImg-Funktion und Übergeben der URL des Bildes kann das Bild vorab heruntergeladen werden. Tatsächlich ist die hier verwendete Pre-Download-Funktion grundsätzlich dieselbe. Nachdem das Bild vorab heruntergeladen wurde, können Sie die Breite und Höhe des Bildes anhand der Breiten- und Höhenattribute von img ermitteln. Allerdings ist zu beachten, dass bei Verwendung der Bildbrowser-Funktion die Bilder in Echtzeit angezeigt werden. Wenn Sie beispielsweise auf die angezeigte Schaltfläche klicken, wird der obige ähnliche Code aufgerufen, um das Bild zu laden. Wenn Sie img.width direkt verwenden, wurde das Bild daher nicht vollständig heruntergeladen. Daher müssen einige asynchrone Methoden verwendet werden, um zu warten, bis das Bild heruntergeladen wurde, bevor die Breite und Höhe von img aufgerufen werden.

Es ist eigentlich nicht schwierig, eine solche asynchrone Methode zu implementieren, und das Abschlussereignis für den Bilddownload ist ebenfalls sehr einfach, es ist ein einfaches Onload-Ereignis. Daher können wir den folgenden Code schreiben:

Kopieren Sie den Code wie folgt:

function loadImage(url, callback) { 
var img = new Image(); 
img.src = url; 
img.onload = function(){ //图片下载完毕时异步调用callback函数。 
callback.call(img); // 将callback函数this指针切换为img。 
}; 
}

Okay, schreiben wir einen weiteren Testfall.

Kopieren Sie den Code wie folgt:

function imgLoaded(){ 
alert(this.width); 
} 
<input type="button" value="loadImage" onclick="loadImage(&#39;aaa.jpg&#39;,imgLoaded)"/>

Testen Sie ihn in Firefox und stellen Sie fest, dass er wie erwartet ist Das Bild wird angezeigt. Egal wie oft Sie klicken oder aktualisieren, die Ergebnisse sind dieselben.

Aber seien Sie nach diesem Schritt nicht zu glücklich – Sie müssen auch die Kompatibilität des Browsers berücksichtigen, also gehen Sie schnell zum IE, um ihn zu testen. Ja, die Breite des Bildes wird ebenfalls angezeigt. Wenn ich jedoch erneut auf „Laden“ klicke, ist die Situation anders und es erfolgt keine Reaktion. Aktualisieren, das Gleiche.

Nachdem wir mehrere Browserversionen getestet haben, haben wir festgestellt, dass dies in IE6 und Opera passiert, während sich Firefox und Safari normal verhalten. Tatsächlich ist der Grund ganz einfach: Er liegt am Cache des Browsers. Nachdem das Bild einmal geladen wurde und es eine weitere Anfrage für das Bild gibt, initiiert der Browser, da das Bild bereits zwischengespeichert wurde, keine neue Anfrage, sondern lädt es direkt aus dem Cache. Bei Firefox und Safari machen sie die beiden Lademethoden für den Benutzer transparent, was auch das Onload-Ereignis des Bildes verursacht. IE und Opera ignorieren diese Identität jedoch und verursachen nicht das Onload-Ereignis des Bildes Code ist In ihnen kann keine Wirkung erzielt werden.

Was tun? Im besten Fall kann das Bild einen Statuswert haben, der angibt, ob es erfolgreich geladen wurde. Da beim Laden aus dem Cache keine Wartezeit besteht, zeigt dieser Statuswert direkt an, dass er heruntergeladen wurde. Beim Laden aus der HTTP-Anfrage wird dieser Wert als unvollständig angezeigt, da er auf den Download warten muss. In diesem Fall ist es machbar.

Nach einiger Analyse habe ich endlich ein Bildattribut gefunden, das mit verschiedenen Browsern kompatibel ist – vollständig. Beurteilen Sie diesen Wert daher einfach vor dem Image-Onload-Ereignis. Schließlich sieht der HTML-Code wie folgt aus:

Kopieren Sie den Code wie folgt:

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

　

Nach all dem Hin und Her, Endlich ermöglichen wir jedem Browser, unsere Ziele zu erreichen. Obwohl der Code sehr einfach ist, löst er das Kernproblem des Bildbrowsers. Als Nächstes müssen Sie nur noch eine andere Methode betrachten:

Kopieren Sie den Code wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 实现图片预加载 加载完后执行动作</title>
</head>
<style type="text/css">
<!--
*html{
margin:0;
padding:0;
border:0;
}
body{border:1px solid #f3f3f3; background:#fefefe}
div#loading{
width:950px;
height:265px;
line-height:265px;
overflow:hidden;
position:relative;
text-align:center;
}
div#loading p{
position:static;
+position:absolute;
top:50%;
vertical-align:middle;
}
div#loading p img{
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
<div id="loading">
<p><img  src="/static/imghw/default1.png"  data-src="http://www.baidu.com/img/baidu_logo.gif"  class="lazy"   / alt="JS implementiert das Vorladen von Bildern ohne Wartezeit" ></p>
</div>
<script>
var i=0;
var c=3;
var imgarr=new Array
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif";
imgarr[1]="http://img.baidu.com/img/logo-img.gif";
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif";
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
function SImage(url,callback)
{
var img = new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
ii=i+1;
callback(i);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
ii=i+1;
callback(i);
}
}
}
img.src=url;
}
function icall(v)
{
if(v<c){
SImage(""+imgarr[v]+"",icall);
}
else if(v>=c){
i=0;
//location.replace(&#39;banner.html&#39;);//这里写自己的动作吧，
}
}