脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax异步加载图片

ajax异步加载图片实例分析

 更新时间：2016年02月29日 09:47:45   作者：Robin99  
这篇文章主要介绍了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》及《PHP+ajax技巧与应用小结》。

希望本文所述对大家ajax程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 浅析Ajax的 原理及优缺点

    浅析Ajax的 原理及优缺点

    本文从ajax技术的背景、原理、ajax的名字，ajax所包含的技术等方面展开话题，介绍ajax的原理及优缺点。本文关于ajax的原理及优缺点介绍的非常详细，具有参考借鉴价值，感兴趣的小伙伴一起学习吧
    2016-04-04
  • iframe式ajax调用示例

    iframe式ajax调用示例

    想必大家对ajax调用有所熟悉，下面为大家介绍下iframe式ajax调用,需要的朋友可以参考下
    2014-02-02
  • Ajax添加数据即时显示信息篇

    Ajax添加数据即时显示信息篇

    经过前3篇的ajax实例教程的学习，我想各位已经能够使用ajax技术进行简单的数据读取工作．
    2010-10-10
  • 浅析JSONP之解决ajax跨域问题

    浅析JSONP之解决ajax跨域问题

    本文主要讲解了如何去解决AJAX跨域的问题，从跨域的简单原理到JONP实现模式详细的讲解整个解决方案，最后利用jQuery可以很方便的实现JSONP来进行跨域访问。
    2015-09-09
  • 使用Ajax时处理用户session失效问题的解决方法

    使用Ajax时处理用户session失效问题的解决方法

    这篇文章主要为大家详细介绍了使用Ajax时处理用户session失效问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • ajax处理服务器返回的三种数据类型方法

    ajax处理服务器返回的三种数据类型方法

    这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Ajax开始准备篇

    Ajax开始准备篇

    我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。
    2010-08-08
  • 关于Ajax请求中传输中文乱码问题的解决方案

    关于Ajax请求中传输中文乱码问题的解决方案

    本文给大家分享关于ajax请求中文乱码问题的解决方案，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-12-12
  • ajax实现数据分页查询

    ajax实现数据分页查询

    这篇文章主要为大家详细介绍了ajax实现数据分页查询的相关资料，以及ajax实现对数据库的查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Ajax的小贴士使用小结

    Ajax的小贴士使用小结

    Ajax的小贴士使用小结...
    2007-10-10

最新评论