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

Posted 2023-02-19

【中文标题】如何使用 ajax 下载图像，然后将其替换为 div 背景？

【英文标题】：How can I download an image with ajax and then replace it as div backgrounds?

【发布时间】：2015-12-08 16:43:35

【问题描述】：

所以我在这里的概念是，我下载一个 .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 上 24 像素，向下 80 像素，并且图像将是 200x400 像素。所以现在 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”，因为它只会重新下载图像！

有什么想法吗？

【问题讨论】：

我同意“使用单个图像作为多个元素的背景” - 这很常见，称为css sprites。当您开始谈论从 PHP 获取图像或将图像加载到隐藏的 div 中时，您会失去我。只需在您的 CSS 中链接到它，它就会加载一次。

上面的代码将完成 css sprites 部分，但是，我无法使用进度条加载图像。我需要使用 ajax 调用来使用进度条。这意味着在手机或慢速连接上，用户可以看到网站的加载量。我将在问题中添加一个示例。

“我要做的第一件事是显示一个进度条（我将在网站上的所有内容中使用一个），它将显示图像加载的进度。” 不确定是否正确解释问题？图片加载在哪里？

图像将加载到隐藏的 div 中。一旦它关闭，就需要将其添加到样式中。请参阅更新的示例。这段代码是我加载所有 js 的方式（并且会有很多 js，可能超过 1mb 的最小化代码）并且能够提供反馈等。我也想对 css sprite 图像执行此操作。在我的真实代码中，我将返回一个具有所有大小的数组，然后循环加载不同类型的内容（使用总大小，而不是该文件的大小）以更新进度条。这意味着用户只会看到一个进度条加载，然后页面就会出现。

【参考方案1】：

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

【讨论】：

我不确定这应该如何提供帮助。所有这些代码似乎所做的就是在进行 ajax 调用时制作一个带有文本加载和加载 gif 的 div。与通过 ajax 等传输图像无关。我的代码已经比这更好了，因为它制作了一个实际的进度条，而不仅仅是一个动画 gif。