php/Ajax - 预加载图像的最佳实践答案

【问题标题】：php/Ajax - Best practice for pre-loading imagesphp/Ajax - 预加载图像的最佳实践
【发布时间】：2010-09-20 10:18:33
【问题描述】：

我已经编写了一个非常类似于 flickr 照片流功能的脚本。两个彼此相邻的缩略图，当您单击下一个或上一个链接时，下一个（或上一个）两个图像滑入。太酷了！

当前，当页面加载时，它会加载两个图像。第一次使用 nxt / prv 然后通过 ajax 加载接下来的两个图像或前两个图像，第一个图像的 id 在 url 中传递，两个新图像的 HTML 通过 ajax 返回和显示。

很简单，但它让我开始思考，在连接速度较慢或服务器负载较重的情况下，这两个图像，虽然相对较小的缩略图仍然需要一段时间才能加载，而滑动窗格的好处是隐藏的数据可以快速流畅地滑入，最好没有加载延迟。

所以我想从性能和良好实践的角度来看哪个选项最好，这是我现在能想到的，欢迎提出建议。

1、通过JSON调用每组图片（应该很快吧？）

2，将所有可能的图像加载到 json 文件中并以这种方式提取详细信息 - 尽管浏览器仍然需要加载图像。另外，有时可能有 4 张图片，有时可能多达 1000 张！

3，通过php将10张图片加载到Json或其他文件中，并将所有10张图片加载到浏览器中，隐藏未显示的8张，始终显示中间两张。这里的问题是，每次有人点击时，文件都必须重新加载第一个和最后一个图像，这仍然需要时间，尽管我想现在中间的图像已经全部通过浏览器缓存了。但仍然有加载时间。

4，是否有可能有一个包含所有图像细节（不管数字）的 json 图像并使用上面的 3 来加载其中的 10 个图像，是否可以使用 ajax 只读取 10 行并保留一个指针它读取的最后一个，因此可以快速加载json文件，刷新时间短，并且两边的图像都通过浏览器缓存！！

希望这很清楚，关于如何处理这个问题有什么建议吗？

【问题讨论】：

JSON 是一种基于文本的传输格式，我认为它不会为预加载图像提供任何好处？
是的，我想更多的是它包含图像 url，然后我可以通过 ajax 加载，而不是每次都通过 php 请求，也许只是一种更快的方式来“获取”信息？跨度>

标签： php ajax json performance loading

【解决方案1】：

要从 Javascript 预加载图像，您无需执行任何听起来像 AJAX 或 JSON 的操作。你只需要这个：

var img = new Image();
img.src = "http://example.com/new/image.jpg";

浏览器会很高兴地在后台加载图像，即使它没有显示在任何地方。然后，当您更新另一个（显示的）图像标签的src 字段时，浏览器将立即显示它已经加载的图像部分（希望是全部）。

【讨论】：

【解决方案2】：

通过 Ajax 获取 JSON 只会减慢您的速度。

最好使用内联 JSON 和生成的 Javascript。

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

【讨论】：

【解决方案3】：

如果你想并发预加载更多的资源，一点点ajax就可以为你解决问题。只需确保缓存标头使得浏览器将在下一个请求中使用资源。在以下示例中，我最多同时加载四个资源。

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

【讨论】：

【解决方案4】：

为什么不使用文本并用图片代码替换文本（在 php 中使用 ajax 非常好，最多 500 张图片等等）？

【讨论】：