所以我的概念就是下载一个.jpg或.png，其中包含所有界面图像（整个网站使用的箭头，按钮，边框等）。然后，当我想使用一个时，我只做一个div：
<div id="img_left_arrow"></div>
然后在css中，我引用了我想要的图像部分：
.img_left_arrow {
background-image:url("path/to/file.png");
background-repeat:no-repeat;
background-position:-24px -80px;
width:200px;
height:400px;
}
因此，此图像位于24px横向，80px位于file.png，图像将为200x400px。所以现在div就在哪里，图像会显示出来。
我想要做的第一件事就是显示一个进度条（我将在网站上使用一个进度条），它将显示图像加载的进度。这会将图像加载到隐藏的div中。因此，目前获取其他项目（如网站中使用的所有js等），我会做这样的事情（我们将使用获取示例的脚本）：
- 空进度条
<div id="mainLoadProg"></div>
- 代码的隐藏div（这将有css隐藏它）
<div id="jscriptCode"></div>
-the php获取代码的大小（size.php）
echo strlen(json_encode(file_get_contents("path/to/file.js")));
- 实际代码（code.php）
echo json_encode(file_get_contents("path/to/file.js"));
- 要运行的jquery代码（客户端）
$(function() {
$('#mainLoadProg').progressbar({ value: 0 });
//get the size first
$.ajax({
type: "POST",
url: "size.php",
dataType: 'json',
success: function(recData) {
loadPageContent(recData); //run function with data size
}
});
});
//function to receive data and show progress bar
function loadPageContent(size) {
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener("progress", function(evt) {
downloadedAmount = evt.loaded;
downloadedPercent = (downloadedAmount / size)*100;
$('#mainLoadProg').progressbar({ value: downloadedPercent });
}, false);
return xhr;
},
type: "POST",
url: "code.php",
dataType: 'json',
success: function(recData) {
$("#jscriptCode").html(recData); //load the code from the php page into the div
}
});
});
当然加载一个只有：
的php页面是没用的<img src="path/to/file.png">
因为它只会加载代码，而不是图像内容。我在PHP中想的是：
echo json_encode(base64_encode(file_get_contents("path/to/file.png")));
这样我就可以使用strlen来获取要下载的文件大小。但是一旦我将base64字符串放入div中，那么最有效的方法是将它作为div中的背景图像？当然我不能使用“path / to / file.png”，因为它只是重新下载图像！
有什么想法吗？