php – 如何使用ajax下载图像,然后将其替换为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中.因此,目前获取其他项目(如网站中使用的所有j等),我会做这样的事情(我们将使用获取示例的脚本)：

– 空进度条

<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",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”,因为它只是重新下载图像！

有什么想法吗？