3

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

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

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

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

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

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

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

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

希望这很清楚，关于你将如何处理这个问题的任何建议？

4

4 回答 4

19

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

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

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

于 2008-11-02T23:47:11.747 回答
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>
于 2008-11-02T23:52:41.300 回答
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();">
于 2009-07-02T08:39:01.210 回答
0

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

于 2009-09-18T23:11:19.680 回答