Implementierungsmethode zum asynchronen Laden von Bildern über js

Dieser Artikel teilt Ihnen hauptsächlich die Implementierungsmethode des asynchronen Ladens von Bildern über js mit. Hauptsächlich unter Berücksichtigung der Einschränkungen des Netzwerks wird für eine bessere Benutzererfahrung die asynchrone Lade- und Anzeigemethode zum Laden von Bildern für img verwendet Code wird direkt eingefügt:

Tag:

<img onload="getHead(this,url);" src="../../static/xxx/xxx/head.png" >
<%--这里注意1,src写在 onload后面2,请给src一个默认的图片路径,不能直接src=""--%>

js:

function getHead(obj,portraitUrl){
    //模拟网络延迟请求
     setTimeout(function (){   
     obj.src=../../static/xxx/xxx/add.png;               
    },1000+Math.random()*5000);

   /*
    $.ajax({        type: "get",
        url: portraitUrl,
        async: true,
        success: function (portrait) {
           obj.src=portrait;
            portraitUrl.onload=null;//这里每次给obj的src赋值后都会执行onload 为了避免无限死循环需要这样置空
        }
*/
}

Und das Obige sind alle Folgen von zu viel Android-Schreiben Ich bin nicht verrückt, einen Ajax zu schreiben, siehe unten:

<img src="http:/xxxx.png" onerror=&#39;this.src="../../static/xxx/xxx/head.png" />//这就ok了

Hauptsächlich unter Berücksichtigung der Einschränkungen des Netzwerks, für eine bessere Benutzererfahrung, das asynchrone Laden und Anzeigen Die Methode wird verwendet, um Bilder für img zu laden und den Code direkt einzufügen:
Tag:

<img onload="getHead(this,url);" src="../../static/xxx/xxx/head.png" >
<%--这里注意1,src写在 onload后面2,请给src一个默认的图片路径,不能直接src=""--%>

js:

function getHead(obj,portraitUrl){
    //模拟网络延迟请求
     setTimeout(function (){   
     obj.src=../../static/xxx/xxx/add.png;               
    },1000+Math.random()*5000);

   /*
    $.ajax({        type: "get",
        url: portraitUrl,
        async: true,
        success: function (portrait) {
           obj.src=portrait;
            portraitUrl.onload=null;//这里每次给obj的src赋值后都会执行onload 为了避免无限死循环需要这样置空
        }
*/
}

Und das Obige sind alle Folgen von zu viel Android-Schreiben. Es besteht absolut kein Grund, sich solche Mühe zu machen und selbst Ajax zu schreiben:

<img src="http:/xxxx.png" onerror=&#39;this.src="../../static/xxx/xxx/head.png" />//这就ok了

js Um das Vorladen von Bildern zu implementieren (JS-Operation Bildobjektattribut abgeschlossen, Ereignis-Onload, asynchrones Laden von Bildern)_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum asynchronen Laden von Bildern über js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!