JavaScript에는 AJAX가 단일 이미지를 로드하여 진행 상황을 표시하는 방법이 도입되었습니다.

추천 무료 학습: js 동영상 튜토리얼

휴대폰으로 인터넷을 서핑할 때 로딩 진행률 표시줄이 자주 표시됩니다. 특히 사진을 로딩할 때 더욱 그렇습니다.

여러 사진의 로딩 진행을 수행했지만, 단일 사진의 경우, 특히 사진이 상대적으로 큰 경우 사용자에게 로딩 진행 상황을 알려주는 진행 표시줄이 필요하며 이는 사용자 경험을 향상시킬 수 있습니다.

기존 로딩은 절대 작동하지 않습니다. AJAX 로딩에는 특별한 진행 이벤트 진행이 필요합니다.

구체적인 데모는 다음과 같습니다. 목표 달성:

이미지를 로드하고 로드 진행률을 표시합니다. 로드가 완료된 후 이미지를 표시합니다.

HTML 구조:

<p id="pro">
    0%
</p>
<p id="box">
    内容加载中。。。
</p>

JavaScript:

let box = document.getElementById("box");
let pro = document.getElementById("pro");
let req = new XMLHttpRequest();
req.open("get","images/1.png" , true);
req.responseType = "blob";   // 加载二进制数据
req.send();

req.addEventListener("progress",function(oEvent){
    if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded / oEvent.total * 100;
        pro.innerHTML = percentComplete + "%" ;
    } else {
        // 总大小未知时不能计算进程信息
    }
});
// 加载完毕
req.addEventListener("load",function(oEvent){
    let blob = req.response;    //  不是 responseText
    pro.innerHTML = "图片加载完毕";
    box.innerHTML = `<img src = ${window.URL.createObjectURL(blob)} >`;
});

여기서 설명해야 할 내용은 다음과 같습니다.

req.responseType = "blob";

요청 데이터 유형을 blob 유형으로 설정합니다. 바이너리 대형 개체는 텍스트가 아닌 데이터를 로드하는 데 사용할 수 있는 더 큰 바이너리 개체입니다. 이 데모는 이미지를 로드합니다.

따라서 반환 데이터를 받을 때 responseText가 아닙니다.

window.URL.createObjectURL(blob)은 blob 개체를 기반으로 개체의 URL 경로를 생성합니다. 이런 방식으로 브라우저에서 blob(그림, 비디오, 오디오 등)으로 표시되는 리소스를 볼 수 있습니다.

관련 무료 학습 권장 사항: javascript(비디오)

위 내용은 JavaScript에는 AJAX가 단일 이미지를 로드하여 진행 상황을 표시하는 방법이 도입되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!