45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:ajax异步加载图片实例有哪些?

ajax异步加载图片实例有哪些?

2016-10-10 09:39:22 来源:www.45fan.com 【

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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/77953.html
Tags: ajax 图片 异步
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部