How to trigger double click using Vanilla JavaScript

Question

I have a International country code selector code for my website contact form, and for that form I want to implement auto double click on the menu button (open and close the menu automatically) after loading the complete website, to load the country flag icons.

Means, the flag icons of my dropdown only starts loading/downloading (one by one) when the user opens the dropdown, which looks ugly specially in mobile devices. I want to preload the flag icons in background, for that I want to implement double click on my ccButton (Var) to download all icons automatically just after loading the webpage.

OR is there any other way available to preload the icons? please suggest me.

  // Cache the elements
  const ccDiv = document.querySelector(".country-code");
  const ccButton = document.querySelector(".country-code .cc-telcode");
  const ccContainer = document.querySelector(".country-code .cc-container");
  const ccSearchInput = document.querySelector(".country-code .cc-search-box");
  const ccList = document.querySelector(".country-code .cc-data-list");
  var selectedCountry = ""; // saved by "code"
  
  // Add event listeners to the button, input, and list
  // We use a process called "event delegation" on the list
  // to catch events from its children as they "bubble up" the DOM
  // https://dmitripavlutin.com/javascript-event-delegation/
  ccButton.addEventListener("click", handleButton);
  ccSearchInput.addEventListener("input", handleInput);
  ccList.addEventListener("click", handleListClick);
  document.addEventListener("click", handleDocumentClick);
  
  // All of the data held as objects within an array
  const data = [
     { name: "Afganistan", code: "93", flag: "afg" },
     { name: "Albania", code: "355", flag: "alb" },
     { name: "Algeria", code: "213", flag: "dza" },
     { name: "American Samoa", code: "1-684", flag: "asm" },
     { name: "Andorra", code: "376", flag: "and" }, 
     { name: "Turkmenistan", code: "993", flag: "tkm" },
     { name: "Turks and Caicos Islands", code: "1-649", flag: "tca" },
     { name: "Tuvalu", code: "688", flag: "tuv" },
     { name: "U.S. Virgin Islands", code: "1-340", flag: "vir" },
     { name: "Uganda", code: "256", flag: "uga" },
     { name: "Ukraine", code: "380", flag: "ukr" },
     { name: "United Arab Emirates", code: "971", flag: "are" },
     { name: "United Kingdom", code: "44", flag: "gbr" },
     { name: "United States", code: "1", flag: "usa" },
     { name: "Uruguay", code: "598", flag: "ury" },
     { name: "Uzbekistan", code: "998", flag: "uzb" },
     { name: "Vanuatu", code: "678", flag: "vut" },
     { name: "Vatican", code: "379", flag: "vat" },
     { name: "Venezuela", code: "58", flag: "ven" },
     { name: "Vietnam", code: "84", flag: "vnm" },
     { name: "Wallis and Futuna", code: "681", flag: "wlf" },
     { name: "Western Sahara", code: "212", flag: "esh" },
     { name: "Yemen", code: "967", flag: "yem" },
     { name: "Zambia", code: "260", flag: "zmb" },
     { name: "Zimbabwe", code: "263", flag: "zwe" },
  ];
  
  
  // Handles the document click - it checks to see if the clicked
  // part of the document has a parent element which is either
  // `null` or is the HTML element, and then closes the container
  // if it's open
  
  function handleDocumentClick(e) {
    const { parentElement } = e.target;
  document.addEventListener("click", (event) => {
    if (!ccDiv.contains(event.target)) {
     ccContainer.classList.remove("show-cc-list");
    }
  });
  }
  
  
  // Filters the data based on the characters
  // at the start of the provided name
  function filterData(data, value) {
    return data.filter((obj) => {
      return (
        obj.name.toLowerCase().startsWith(value.toLowerCase()) ||
        obj.code.toLowerCase().startsWith(value.toLowerCase())
      );
    });
  }
  
  // Create a series of list items based on the
  // data passed to it
  function createListHtml(data) {
    return data.map((obj) => {
        const { name, code, flag } = obj;
        let isSelected = "";
        if (obj.code == selectedCountry) isSelected = "selected";
        return `
        <li
          class="cc-list-items"
          data-name="${name}"
          data-code="${code}"
          data-flag="${flag}"
          id="${isSelected}"
        >
          <div class="flag-icon flag-icon-${flag}"></div>
          <div class="name">${name} (+${code})</div>
        </li>
      `;
      })
      .join("");
  }
  
  // Toggle the container on/off
  function handleButton() {
    ccContainer.classList.toggle("show-cc-list");
    ccList.innerHTML = createListHtml(data);
  }
  
  // No data available list item
  function createNoDataHtml() {
    return '<li class="nodata">No data available</li>';
  }
  
  // When the input is changed filter the data
  // according to the current value, and then
  // create some list items using that filtered data
  function handleInput(e) {
    const { value } = e.target;
    if (value) {
      const filtered = filterData(data, value);
      if (filtered.length) {
          ccList.innerHTML = createListHtml(filtered);
      } else {
          ccList.innerHTML = createNoDataHtml();
      }
    } else {
      ccList.innerHTML = createListHtml(data);
    }
  }
  
  // Create some button HTML
  function createButtonHtml(code, flag) {
    return `
      <div class="flag-icon flag-icon-${flag}"></div>
      <option class="cc-code" value="+${code}">+${code}</option>
    `;
  }
  
  // When an item is clicked, grab the relevant data
  // attributes, create the new button HTML, and then
  // close the container
  function handleListClick(e) {
    const item = e.target.closest("li") || e.target;
    if (item.classList.contains("cc-list-items")) {
      const { code, flag } = item.dataset;
      selectedCountry = item.dataset.code;
      ccButton.innerHTML = createButtonHtml(code, flag);
      ccContainer.classList.remove("show-cc-list");
    }
  }

.cc-telcode {
       margin-bottom: 1em;
       display: flex;
       justify-content: center;
       width: 100%;
  }
  
   .cc-telcode div.cc-code, 
   .cc-list-items div.name {
       margin-left: 0.25em;
  }
   .cc-container {
       display: none;
       width: 300px;
       position: absolute;
  }
   .show-cc-list {
       display: block;
       z-index: +999;
  }
   .cc-data-list {
       max-height: 100px;
       list-style: none;
       margin: 1em 0 0 0;
       padding: 0;
       overflow-y: scroll;
       border: 1px soldi darkgray;
  }
   .cc-list-items {
       display: flex;
       padding: 0.25em;
       border: 1px solid lightgray;
  }
   .cc-list-items:hover {
       cursor: pointer;
       background-color: lightyellow;
  }
  
   #selected {
       cursor: pointer;
       background-color: rgb(73, 118, 241);
  }
  
  .country-code {
     width:150px;
  }

<link href="https://amitdutta.co.in/flag/css/flag-icon.css" rel="stylesheet"/>

<div class="country-code">
  <button class="cc-telcode">Tel code</button>
  <section class="cc-container">
     <input type="text" class="cc-search-box" placeholder="Search for country" />
     <ul class="cc-data-list">
           <!------- Print All Options Here ------->
     </ul>
  </section>
</div>