如何使用 JQuery 一次将多个图像添加到 DOM？

Question

我正在为从带有each 循环的数组接收的多个图像创建一个创建img 元素，但我想一次将它们全部插入到DOM，但它们一次添加一个，换句话说，我想等到所有的元素都被创建后才显示在 DOM 上。

我创建了这个逻辑，希望我能实现我想要的。

    const projectData = [
      {coverImg: '../someImg-1.png},
      {coverImg: '../someImg-2.png},
      {coverImg: '../someImg-3.png},
      {coverImg: '../someImg-4.png},
   ]



$(function() {
  let imagesArr = []

  const projects_container = $('<div></div>')
  projects_container.addClass('projects_container')

  $.each(projectData, (index, value) => {
    const card_block_El = $('<div></div>')
    card_block_El.appendTo(projects_container)

    const card_img_div_El = $('<div></div>')
    const card_img_El = $('<img>')
    card_img_El.attr('src', value.coverImg)
    card_img_El.appendTo(card_img_div_El)

    card_img_div_El.appendTo(card_block_El)

    imagesArr.push(card_block_El)
  })

  if (imagesArr.length >= projetosData.length) {
    projects_container.appendTo('#projects')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="projects"></div>

我的想法是，元素将在循环内一次创建并附加到projects_container，但在循环之后，因为所有图像都已附加到其容器中（由有条件的），当我将容器附加到projects 时，它们将一次全部加载，但这不是正在发生的事情，图像被一次插入到 DOM 中，即使它们已经创建。我刚开始学习 JQuery，我相信我没有做对。

我怎样才能做到这一点？

附：我正在从 Firebase Firestore 获取图像到 projectData 文件并将其导入到此脚本中。

Answer 1

你正在寻找这个

• 我把容器藏起来了
• 我一次性预加载和附加 HTML
• 加载最后一张图片后，我会显示容器

const projectData = [
{ coverImg: 'https://via.placeholder.com/350x150?text=image1' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image2' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image3' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image4' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image5' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image6' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image7' }, 
{ coverImg: 'https://via.placeholder.com/350x150?text=image8' } 
]

$(function() {
  const $projects_container = $("#projects");
  let counter = 0
  $projects_container.addClass('projects_container')
  $projects_container.html(projectData.map((value, i) => {    
    let img = new Image;
    $(img).on("load",() => {
      counter++;
      if (counter===projectData.length) {
        $('#projects').fadeIn("slow")
      }  
    })
    img.src=value.coverImg;
    const html = `<div class="card_block">
           <div class="card_img_div_El">Image ${i+1}<br/>
             <img class="card_img_El" src="${img.src}"/>
           </div>
         </div>`;
    return html
  }).join(''));
  const $images = $("#projects").find('.card_img_El');
  
})

#projects { display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projects"></div>

Answer 2

你可以等到每张图片都加载完毕，我会用 settimeout 来做。

const projectData = [
    { coverImg: 'https://via.placeholder.com/350x150?text=image1' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image2' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image3' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image4' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image5' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image6' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image7' },
    { coverImg: 'https://via.placeholder.com/350x150?text=image8' }
];


document.addEventListener("DOMContentLoaded", function(event) {
    
    const projects_container = document.createElement("div");
    projects_container.classList.add('projects_container');
    for(i=0;i<projectData.length;i++)
    {
        const card_block_El   = document.createElement("div");
        const card_img_div_El = document.createElement("div");
        const card_img_El     = document.createElement("img");
        card_img_El.src       = projectData[i].coverImg;

        card_img_div_El.appendChild(card_img_El);
        card_block_El.appendChild(card_img_div_El);
        projects_container.appendChild(card_block_El);
    }


   document.getElementById("projects").style.display = "none";
   document.getElementById("projects").appendChild(projects_container)  ;


    var CheckImages=function () {
        var loadedimages=0;
        var images=document.getElementById("projects").getElementsByTagName("img");
        for(i=0;i<images.length;i++){
            if(images[i].complete && images[i].naturalHeight !== 0){
                loadedimages++;
            }

        }
        if(images.length ==loadedimages)
        {
            document.getElementById("projects").style.display = "block";
        }
        else
        {
            setTimeout(CheckImages, 1000);
        }
    }
    CheckImages();
  });

<div id="projects"></div>