php/Ajax-预加载图像的最佳实践
我已经编写了一个非常类似flickr photostream功能的脚本。两个缩略图相邻，单击“下一个”或“上一个”链接时，将滑入下一个（或上一个）图像。酷 当前，当页面加载时，它加载两个图像。第一次使用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文件就可以快速加载、短时间刷新，并通过浏览器缓存任意一侧的图像php/Ajax-预加载图像的最佳实践,php,ajax,json,performance,loading,Php,Ajax,Json,Performance,Loading,我已经编写了一个非常类似flickr photostream功能的脚本。两个缩略图相邻，单击“下一个”或“上一个”链接时，将滑入下一个（或上一个）图像。酷 当前，当页面加载时，它加载两个图像。第一次使用nxt/prv时，接下来的两个图像或前两个图像通过ajax加载，第一个图像的id通过url传递，两个新图像的HTML通过ajax返回并显示 很简单，但这让我想到，在连接速度慢或服务器负载重的情况下，两个图像的加载仍然需要一段时间，虽然相对较小的缩略图可能需要一段时间才能加载，而滑动窗格的好处是，隐
希望这是清楚的，关于如何处理这个问题有什么建议吗？要从Javascript预加载图像，您不需要做任何听起来像AJAX或JSON的事情。您所需要的就是：
var img = new Image();
img.src = "http://example.com/new/image.jpg";
浏览器会很高兴地将图像加载到背景中，即使它没有显示在任何地方。然后，当您更新另一个（显示的）图像标记的
src <?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>
jQuery（函数（$）{
var图像=（）；
/*创建隐藏框以将图像预加载到*/
var imgbox=document.createElement（“div”）；
$（imgbox）.css（{display:'none'}）；
/*可能的替代伎俩*/
/*$（imgbox）.css（{高度：1px；宽度：1px；溢出：隐藏；}）*/
$（'body'）.append（imgbox）；
$。每个（图像、功能（索引、项目）
{
#将图像注入底部隐藏分区。
var img=document.createElement（“img”）；
$（img）.src（“/some/prefix/”+项）；
$（imgbox）.append（img）；
});
});
<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();">
变量URL=[
“a.png”，
“b.png”，
“c.png”，
“d.png”，
“e.png”，
“f.png”
];
var currentStep=0；
函数loadResources（）
{
如果（currentStep为什么不使用文本并用图片代码替换文本（在php中使用ajax时效果非常好，最多可使用500张图片和更多图片）？JSON是一种基于文本的传输格式，我不认为它对预加载图像有任何好处？是的，我更多考虑的是保存图像url，然后通过ajax加载，而不是每次通过php请求，这可能是一种更快地“获取”信息的方法？