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

StackOverflow https://stackoverflow.com/questions/257550

题

我已经整理了一个非常类似于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文件可以快速加载，短刷新和图像任何一方都通过浏览器缓存!!

希望这清楚，有关如何处理此事的任何建议吗？

有帮助吗？

解决方案

要从Javascript预加载图像，您不需要执行任何听起来像AJAX或JSON的操作。所有你需要的是：

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

浏览器很乐意在后台加载图片，即使它没有在任何地方显示。然后，当您更新另一个（显示的）图像标记的 src 字段时，浏览器将立即显示已加载的图像部分（希望所有图像）。

其他提示

通过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>

如果您想同时预加载大量资源，可以使用一点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();">

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top