本文主要和大家分享透過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 为了避免无限死循环需要这样置空 } */ }
<img src="http:/xxxx.png" onerror='this.src="../../static/xxx/xxx/head.png" />//这就ok了
<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 为了避免无限死循环需要这样置空 } */ }
<img src="http:/xxxx.png" onerror='this.src="../../static/xxx/xxx/head.png" />//这就ok了
相關建議:
js 實作圖片預先載入(js操作Image物件屬性complete ,事件onload 非同步載入圖片)_javascript技巧
以上是透過js異步載入圖片實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!