首頁  >  文章  >  web前端  >  透過js異步載入圖片實作方法

透過js異步載入圖片實作方法

小云云
小云云原創
2018-03-17 16:47:313097瀏覽

本文主要和大家分享透過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載入圖片,直接貼程式碼:
標籤:
<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了

相關建議:

js 實作圖片預先載入(js操作Image物件屬性complete ,事件onload 非同步載入圖片)_javascript技巧

以上是透過js異步載入圖片實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn