[FIXED] How to add multiple images to the DOM all at once with JQuery?

Issue

I am creating a creating img elements for multiple images received from an array with each loop, but I'd like to insert all of them to the DOM at once, but they are being added one at a time, in other words, I want to wait until all of the elements are created before they are shown on the DOM.

I've created this logic hoping that I could achieve what I want.

    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>

What I thought is, well, the elements will be created and appended to projects_container one at a time within the loop, but after the loop, since all images will already be appended to its container (what is verified by the conditional), when I append the container to projects, they will be loaded all at once, but that's not what is happening, the images are being inserted to the DOM one at a time, even if they are already created. I just started learning JQuery and I believe I didn't get it right.

How could I achieve this?

P.S. I am fetching the images from Firebase Firestore to projectData file and importing it to this script.

Solution

You are looking for this

• I hide the container
• I preload and append the HTML in one go
• When the last image has loaded I show the container

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>

Answered By - mplungjan

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)