预加载 img 以显示 div 背景是否正确？答案

【问题标题】：Is it correct way to preload img to display div background?预加载 img 以显示 div 背景是否正确？
【发布时间】：2020-01-02 21:32:03
【问题描述】：

您好，我正在使用此代码预加载一些我用作某些 div 的背景的图像。

我可视化了 chrome 控制台，实际上预加载有效，但在我看来，无论如何，当我启动应用程序时，有问题的 div 上会闪烁，好像图像 css 的调用与预加载无关它。

这是我的印象？我错过了 preload 方法中的任何内容吗？

在 jquery 中我使用：

$(window).load(function () {

let p_url = cc_object.p_url;
p_url = p_url + '/public/images/';

let cache = [];

$.preLoadImages = function () {
    let args_len = arguments.length;
    for (let i = args_len; i--;) {
        let cacheImage = document.createElement('img');
        cacheImage.src = arguments[i];
        cache.push(cacheImage);
    }
};
$.preLoadImages(
    p_url + "dorso.png",
    p_url + "t-z-amore-bg.jpg"
);
});

在css中：

.cont_game  {
    background: url(../images/t-z-amore-bg.jpg) no-repeat center center;
}    
.cont_game .carta_estratta.empty {
    background: url(../images/dorso.png) no-repeat center center;
}

你可以在https://www.casadeicartomanti.it/tarocchi/tarocchi-online/看到它的实际应用

【问题讨论】：

好吧，您正在加载图像，但是预加载图像要求您在需要它们之前加载它们。 css 将加载图像，除非您要等待 javascript 在加载 css 之前加载它们，否则这不会做任何事情。
另外，这实际上与 jquery 无关。如果您改用 javascript 标签，您可能会得到更多关注。

标签： jquery preloading image-preloader

【解决方案1】：

您正在检测所需输入的更改，然后调用readURL() 函数：

$('body').on('change', '[name="pic_path"]', function () {
    $('.preview').css('background-image','');
    readURL(this);
});

在readURL() 中，您将所选图像作为背景插入到 div 中：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('.preview').css('background-image','url(' + e.target.result + ')');
    };
    reader.readAsDataURL(input.files[0]);
  }  
}

然后，您只需将给定的 HTML 元素放置在您想要的位置，所选图片将在其中预览。

<div class="preview"></div>

【讨论】：

【解决方案2】：

所以我的方法不对？一旦图像被预加载，浏览器不应该加载我说的作为背景预加载的图像吗？

【讨论】：