php - 如何使用 ajax 下载图像，然后将其替换为 div 背景？

Question

所以我的想法是，我下载一个 .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;
}

所以这张图片在 file.png 上的宽度为 24px，向下为 80px，图片大小为 200x400px。所以现在 div 在哪里，图像就会显示。

我想做的第一件事是显示一个进度条(我将为网站上的所有内容使用一个进度条)以显示图像加载的进度。这会将图像加载到隐藏的 div 中。所以目前要获取其他元素(如网站中使用的所有 js 等)，我会做这样的事情(我们将只使用获取脚本作为示例):

-空进度条

<div id="mainLoadProg"></div>

-代码的隐藏div(这将有css来隐藏它)

<div id="jscriptCode"></div>

-获取代码大小的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”，因为它只会重新下载图像!

有什么想法吗？

Answer 1

如果我理解正确，这可能会有所帮助! https://gist.github.com/markmichon/6510134