Lorsque vous utilisez Jquery pour ajouter des éléments à la page et définir l'image d'arrière-plan de l'élément, l'image d'arrière-plan sera toujours retardée de quelques secondes.

introduire

Utilisez jquery, lors de l'ajout d'éléments à la page, et en définissant dynamiquement l'image d'arrière-plan de l'élément en même temps, cela fera toujours apparaître l'image d'arrière-plan après quelques secondes, comme le montre la figure suivante :

solution

1. Créer un imageobjet,
2. définir les propriétés imagede l'objet src;
3. Dans l'événement callback imagede l'objet onload, il suffit de définir le fond de l'image,
   le code est le suivant :

  const box = document.createElement('div');  // 向页面创建一个div元素
  box .classList.add('box');    //  设置div的类名为 box
  const image = new Image();    //  创建一个图片对象
  image.src = './images/tupian.png';  //   设置图片的地址
  image.onload = function() {
    
        //   在事件回调函数中，动态设置图片背景
  $('.bottom-name').css("background-image", `url(${
      
      './images/tupian.png'})`);
  };

astuces : src les attributs doivent être écrits onload après