代码之家 › 专栏 › 技术社区 › Paul M

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

loading performance json ajax php

3

Paul M · 技术社区 · 17 年前

我已经编写了一个非常类似flickr photostream功能的脚本。两个缩略图相邻,单击“下一个”或“上一个”链接时,将滑入下一个(或上一个)图像。凉的

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

因此,我想从性能和良好实践的角度来看,哪种选择是最好的,这就是我现在可以想到的,欢迎大家提出建议。

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

4、是否有可能拥有一个包含所有图像细节(不管数字)的json图像,并使用上面的no 3加载其中10个图像,是否有可能使用ajax只读取10行并保留最后一行的指针,这样json文件就可以快速加载、短时间刷新,并通过浏览器缓存任意一侧的图像!!

希望这是清楚的,你有什么建议来处理这个问题吗?

4 回复 | 直到 17 年前

1

19

Greg Hewgill 17 年前

要从Javascript预加载图像,不需要做任何听起来像AJAX或JSON的事情。您所需要的就是:

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

浏览器会很高兴地将图像加载到背景中,即使它没有显示在任何地方。然后,当您更新 src 在另一个(显示的)图像标记的字段中,浏览器将立即显示已加载的图像部分(希望是全部)。

2

1

Kent Fredric 17 年前

通过Ajax获取JSON只会降低速度。

 <?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

0

brianegge 17 年前

如果你想同时预加载大量资源,一点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

0

rmtheis sillygoose 14 年前