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

发布于 2024-07-08 10:48:01 字数 825 浏览 6 评论 0原文

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

目前，当页面加载时，它会加载两个图像。第一次使用 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 文件，刷新时间短，并且两侧的图像都通过浏览器缓存！

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

原文

I have put together a script which is very much like the flickr photostream feature. Two thumbnails next to each other, and when you click the next or prev links the next (or previous) two images slide in. Cool!

Currently when the page loads it loads the two images. The first time nxt / prv is used then the next two images or previous two are loaded via ajax, with the id of the first image being passed in the url and the HTML for the two new images returned and displayed via ajax.

simple enough, but it got me to thinking, on a slow connection, or heavy server load then the two images, although relatively small thumbnails could still take a while to load, and the nice things with sliding panes is the fact that the hidden data slides in quickly and smoothly preferbly without a loading delay.

So I was wondering from a performance and good practice point of view which option is best, this is what I can think of for now, open to suggestions.

1, call each set of images via JSON (its supposed to be fast?)

2,load all the possible images into a json file and pull in the details that way - although browser will still have to load image. Plus sometimes there might be 4 images, other times there could be upto 1000!

3, Load 10 images via php into a Json or other file, and load all 10 images into the browser hiding the 8 which are not on show, and always showing the middle two. Problem here is that each time someone clicks, the file has to reload the first and last images, which still takes up time, although i suppose the middle images will have all been cached via the browser by now though. But still there is a loading time.

4, Is it possible to have a json image with all the image details (regardless of numbers) and use no 3 above to load 10 of those images, is it possible to use ajax to only read 10 lines and keep a pointer of the last one it read, so the json file can be loaded fast, short refresh and images either side are cached via the browser!!

Hope thats clear, any suggestions on how you would handle this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不一样的天空 2024-07-15 10:48:01

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

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

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

To preload an image from Javascript, you don't need to do anything that sounds like AJAX or JSON. All you need is this:

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

The browser will quite happily load the image in the background, even though it's not displayed anywhere. Then, when you update the src field of another (displayed) image tag, the browser will immediately show the part of the image it's already loaded (hopefully all of it).

回复收藏 0 原文

君勿笑 2024-07-15 10:48:01

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

Fetching JSON Via Ajax will just slow you down.

You're better off using inline JSON and generated 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 原文

与往事干杯 2024-07-15 10:48:01

如果您想要并发预加载大量资源，一点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();">

In the case where you want to concurrently preload a larger number of resources, a little ajax can solve the problem for you. Just make sure the caching headers are such that the browser will use the resources on the next request. In the following example, I load up to four resources concurrently.

<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 原文