js를 통해 이미지를 비동기적으로 로딩하는 구현 방법

이 기사에서는 주로 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 이미지 사전 로드 구현 작업 이미지 객체 속성 완료, 이벤트 온로드 이미지 비동기 로딩)_javascript 기술

위 내용은 js를 통해 이미지를 비동기적으로 로딩하는 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!