通过js异步加载图片实现方法

小云云
Lepaskan: 2018-03-17 16:47:31
asal
3100 orang telah melayarinya

本文主要和大家分享通过js异步加载图片实现方法,主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码: 

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

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

然后上面都是Android写多了的后遗症,完全没必要这么麻烦啊,脑抽了啊自己写个ajax,所有请看下面:

<img src="http:/xxxx.png" onerror=&#39;this.src="../../static/xxx/xxx/head.png" />//这就ok了
Salin selepas log masuk
Salin selepas log masuk
主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码:
标签:
<img onload="getHead(this,url);" src="../../static/xxx/xxx/head.png" >
<%--这里注意1,src写在 onload后面2,请给src一个默认的图片路径,不能直接src=""--%>
Salin selepas log masuk
Salin selepas log masuk

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

然后上面都是Android写多了的后遗症,完全没必要这么麻烦啊,脑抽了啊自己写个ajax,所有请看下面:

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

相关推荐:

js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)_javascript技巧

Atas ialah kandungan terperinci 通过js异步加载图片实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan