logo标签列表

PHP/Ajax预加载图片的最佳实践

phpajaxjsonperformanceloading
3
我已经编写了一个脚本，非常类似于flickr的照片流功能。两个缩略图并排显示，当您单击next或prev链接时，下一个（或上一个）两张图像会滑入。很酷！
目前，页面加载时会加载这两个图像。第一次使用nxt / prv时，通过ajax加载下一个或上一个两个图像，将第一张图像的ID传递到URL中，并通过ajax返回和显示两个新图像的HTML。
虽然相对较小的缩略图像，但在慢速连接或服务器负载较重的情况下，这两个图像仍可能需要一段时间才能加载。而滑动窗格的好处在于隐藏数据快速、平稳地滑入，最好不要有加载延迟。
因此，从性能和良好实践的角度考虑，哪种选项最好，我想到了以下几种，欢迎提出建议。
1. 通过JSON调用每组图像（它应该很快？）
2. 将所有可能的图像加载到一个json文件中，并以此方式获取详细信息 - 虽然浏览器仍必须加载图像。有时可能有4张图片，其他时候可能有多达1000张！
3. 通过php将10个图像加载到Json或其他文件中，并将所有10个图像加载到浏览器中，隐藏不显示的8个图像，并始终显示中间两个图像。这里的问题是每次有人点击时，文件必须重新加载第一个和最后一个图像，这仍需要时间，虽然我想中间的图像现在已经通过浏览器缓存了。但仍存在加载时间。
4. 是否可能具有所有图像详细信息的json图像（无论数量如何），并使用上述方法3加载其中的10个图像，是否可以使用ajax仅读取10行并保持其读取的最后一行的指针，以便可以快速加载json文件，短刷新并且两侧的图像都由浏览器缓存！
希望这很清楚，您有关于如何处理此问题的建议吗？
3
JSON是一种基于文本的传输格式，我认为它不会为预加载图像提供任何好处。 - Dave Marshall
是的，我更多考虑将其保存为图像URL，然后可以通过AJAX加载它，而不是每次请求都通过PHP请求，这可能是一个更快的“获取”信息的方法。 - Paul M
4个回答
19

要从Javascript中预加载图像，你不需要进行任何类似于AJAX或JSON的操作。你只需要这样做：

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

即使图片没有显示在任何地方，浏览器也会愉快地在后台加载它。然后，当您更新另一个（已显示的）图像标记的src字段时，浏览器将立即显示它已经加载的部分图片(希望全部都加载了)。

1

通过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>
0
在需要同时预加载大量资源的情况下，可以使用一些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();">
0
为什么不使用文本并用图片代码替换文本呢（在php中，使用ajax可以很好地处理500张以上的图片）？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接