ajax如何异步加载图片

2024-04-02 19:04:59 364人浏览安东尼

摘要

这篇文章主要为大家展示了“ajax如何异步加载图片”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“ajax如何异步加载图片”这篇文章吧。具体如下：图片一般比较大，

这篇文章主要为大家展示了“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如何异步加载图片”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ajax如何异步加载图片

本文链接: https://www.lsjlt.com/news/79885.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341