Facebook 和 myspace 在照片库中都有一个不错的功能,当您转到图像页面时,该页面包含用户图像和页面上的用户评论。您可以按键盘左右箭头键,页面将加载下一页,速度非常快,如果您按住该键,它将快速浏览许多页面。我知道这主要是用 javascript,我的主要问题是如何让新页面加载得这么快?
我使用 PHP/mysql/Javascript
Facebook 和 myspace 在照片库中都有一个不错的功能,当您转到图像页面时,该页面包含用户图像和页面上的用户评论。您可以按键盘左右箭头键,页面将加载下一页,速度非常快,如果您按住该键,它将快速浏览许多页面。我知道这主要是用 javascript,我的主要问题是如何让新页面加载得这么快?
我使用 PHP/mysql/Javascript
他们实际上并没有加载页面,而只是使用Ajax加载页面的一部分。仅此而已 - 当您按下按钮时,它们会即时加载图像。您可以在 Facebook中通过“网络”选项卡中打开的Firebug观看。
如果您喜欢 JQuery,那么JQuery Ajax页面是一个很好的起点。
您可以查看流行的灯箱脚本之一的源代码以获取真实示例。
您将捕获用户正在按下的键,以及对左箭头和右箭头的响应。捕获密钥并不是那么困难:
$(window).bind("keypress", function(e) {
var code = (e.keyCode ? e.keyCode : e.which); // which code?
alert(String.fromCharCode(code)); // which key, according to the code?
});
您希望根据自己的喜好调整该代码。如果右箭头是单击,则发出请求get-image.php?direction=next&user=12838203
,如果它是后向箭头,只需将“下一个”换成“上一个”。
$("#loading").show(); // fancy ajax loading animation
$.post("get-image.php", {direction:"next",user:12838203}, function(response){
// hide our ajax loading animation
$("#loading").hide();
// if we get a proper response, like a source for a new image back
$("#image").fadeOut("fast").attr("src", response).fadeIn("fast");
});