欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-30 16:22:52
...

本文主要和大家分享通过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='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='this.src="../../static/xxx/xxx/head.png" />//这就ok了

相关推荐:

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

以上就是通过js异步加载图片实现方法的详细内容,更多请关注其它相关文章!