PHP / Ajax的 - 为pre-加载图像最佳实践 [英] php/Ajax - Best practice for pre-loading images

问题描述

我已经把一个脚本，这是非常喜欢的Flickr照片功能。两个缩略图彼此相邻，当你点击下一个或preV链路下一个（或previous）两幅图像中滑动。爽！

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!

目前在页面加载时它加载了两个图像。用于第一次NXT / PRV那么接下来的两个图像或previous两个是通过AJAX加载，与正在通过在URL中的第一个图像的ID和HTML两个新的图像恢复，并通过AJAX显示。

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.

很简单，但它让我思考，在连接速度慢，或重的服务器负载那么这两个图像，虽然比较小缩略图可能还需要一段时间来加载，并与滑动面板的好处之一是，在快速隐藏数据的幻灯片，顺利pferbly $ P $没有负载的延迟。

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，调用每个组图像通过JSON（它应该是快？）

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

2，加载所有可能的图像转换成一个JSON文件，并在细节上拉的方式 - 虽然浏览器仍然要加载图像。此外，有时可能有4张图片，其他时间有可能会高达1000！

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，负载通过PHP 10张成JSON或其他文件，并加载所有10张到浏览器中隐藏8这是不是在表演，始终呈现出中间的两个。这里的问题是，每次有人点击该文件已加载第一个和最后的图像，这仍需要时间，但我想中间的图像将已经全部通过浏览器缓存现在虽然。但还是有一个加载时间。

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，是否有可能与所有的图像细节（不考虑号码）的JSON形象，使用上面没有3加载10这些图像中，是否有可能使用Ajax只读10行，并保持一个指针的最后一个读取它，所以JSON文件可以加载快，短刷新和图象任一侧经由浏览器!!

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?

推荐答案

要preLOAD在Javascript中的图像，你不需要做任何事情，听起来像AJAX或JSON。所有你需要的是这样的：

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";

浏览器将很高兴地加载图像的背景下，即使它没有任何地方显示出来。然后，当你更新其他（显示）图像标签的的src 字段，浏览器会立即显示出它已加载图像的一部分（希望这一切）。

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).

这篇关于PHP / Ajax的 - 为pre-加载图像最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！