jsで画像を非同期に読み込む実装方法

この記事では、主にネットワークの制限を考慮して、img の画像を直接貼り付ける非同期読み込みおよび表示方法を使用します。 :

タグ:

<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 为了避免无限死循环需要这样置空
        }
*/
}

そして、上記はすべて Android で書きすぎた結果です。私は自分で ajax を書いただけです。

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

主にネットワークの制限を考慮し、ユーザーエクスペリエンスを向上させるために、非同期読み込みおよび表示メソッドを使用してimgの画像を読み込み、コードを直接貼り付けます:

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 为了避免无限死循环需要这样置空
        }
*/
}

上記はすべてですAndroid 上書きの後遺症。そんなに面倒なことは必要ありません。私は自分で ajax を書きました。すべてについては以下を参照してください:

画像のプリロードを実装するための js (js)操作 画像オブジェクト属性の完了、イベント onload 画像の非同期読み込み)_javascript スキル

以上がjsで画像を非同期に読み込む実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。