使用Jquery为页面添加元素，并设置元素的背景图片时，背景图总会延迟几秒才会出现的问题

介绍

使用 jquery，为页面添加元素时，同时动态设置元素的背景图，总是会导致背景图延迟几秒才会出现，如下图所示：

解决方式

1. 创建一个 image 对象，
2. 定义 image 对象的 src 属性；
3. 在 image 对象的 onload 事件回调中，设置图片的背景即可，
   代码如下：

  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'})`);
  };

tips: src 属性一定要写到 onload 的后面