溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“ajax如何異步加載圖片”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ajax如何異步加載圖片”這篇文章吧。
具體如下：
圖片一般比較大，所以他們都是在基本網頁加載后才逐漸加載上的，整個加載的過程非常不雅觀，或者是從模糊逐漸變清晰，或者是從上往下拓展開（當然你也可以認為這些都是不錯的特效）。如果是通過定時更換img的src屬性來實現圖片的動態更換，由此帶來的閃爍更讓它難以接受，這可不是用alt屬性就能讓人愉快的。
聯系時下比較熱門的，號稱“無”刷新的AJAX技術，利用XMLHttpRequest對象發起異步請求，待圖像加載完畢再動態插入到“前臺”的HTML頁面上。應該可以滿足需求，不過XMLHttpRequest對象返回的對象只有兩個屬性responseXML和responseText，前者是XML對象，后者是返回的純文本內容，似乎沒有圖片所需要的二進制數據...退一步，即使能用responseText取回圖片的二進制數據，我們又如何能夠將它插入到前臺頁面呢？將img的src屬性換成請求的url？
說干就干，寫個圖像幻燈片的代碼來驗證自己的想法：
<html>
<head>
<title>Image Slide</title>
<script>
function makeAsyncRequest(url, callback)
{
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4
&& httpRequest.status == 200)
callback(url);
};
httpRequest.open('GET', url, true);
httpRequest.send('');
}
var i = 0;
var max_i = 10;
function displayImage()
{
var url = "./" + i + ".jpg";
makeAsyncRequest(url, function (url) {
var div = document.getElementById("image");
var img = div.getElementsByTagName("img");
if (img.length == 0) {
img = document.createElement("img");
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
div.appendChild(img);
} else
img = img.item(0);
img.src = url;
if (i == max_i)
i = 0;
else
i ++;
window.setTimeout("displayImage();", 1000);
});
}
</script>
</head>
<body onload="displayImage();">
<div id="image">
</div>
</body>
</html>以上代碼以1000毫秒為時間間隔循環顯示圖片0.jpg - 10.jpg，效果比較明顯，確實消除了閃爍。那么它的原理呢？每張圖片的顯示都分為兩個步驟：
用XMLHttpRequest對象從服務器獲取圖像，緩存圖像到本地的瀏覽器緩沖區。
從本地的瀏覽器緩沖區取得圖像進行顯示。
因為在第二步從取圖片到顯示的時間很短，所以用戶基本上覺察不出任何閃爍。可見，以上技術基于所請求的圖像是可緩存的的假設，如果圖像是不可緩存的，是不是以上代碼就不能正常工作了呢？
還是讓代碼來說話，把以上代碼做些更改：
function displayImage()
{
var url = "./" + i + ".jpg";
var url = "./image.php?filename=" + i + ".jpg";
makeAsyncRequest(url, function (url) {
var div = document.getElementById("image");
var img = div.getElementsByTagName("img");再寫一個php腳本用來傳送所請求的圖片：
<?php
header("Content-Type: image/jpeg");
header("Cache-Control: no-cache");
echo file_get_contents($_GET["filename"]);
?>果真不出所料，又出現了閃爍...
看來還需要另想辦法，閉門造車是行不通了，求助google這位百事通先生吧！功夫不負有心人，終于還是被我找到了，欣喜歸欣喜，結果還是讓我大跌眼鏡，img竟然有onload的事件回調接口，只能慶幸自己的眼鏡是樹脂的了，"眼鏡掉了我不怕不怕啦，不怕不怕不怕啦..."
還等啥，當然是代碼伺候了:
<html>
<head>
<title>Image Slide</title>
<script>
var i = 0;
var max_i = 10;
function displayImage()
{
var img = document.createElement("img");
img.onload = function () {
var div = document.getElementById("image");
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
div.appendChild(img);
if (i == max_i)
i = 0;
else
i ++;
window.setTimeout("displayImage();", 1000);
}
img.src = "./" + i + ".jpg";
}
</script>
</head>
<body onload="displayImage();">
<div id="image">
</div>
</body>
</html>"She is an ungly girl!"沒啥好說的，不可緩存的圖像的情況：
i ++;
window.setTimeout("displayImage();", 1000);
}
img.src = "./" + i + ".jpg";
img.src = "./image.php?filename=" + i + ".jpg";
}
</script>
</head>以上是“ajax如何異步加載圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
