My html script has a LOT of href urls and is causing my page to slow down, how to solve this issue?

问题

So, really I am a beginner on scripting and I did multiple hours research to find a solution but couldn't figure it out.

I have a "image search jquery script. It runs normal when I have everything embedded in one single html code. Yet, things started to get difficult (slow browser, sluggish browser response, slowing down the computer...) when the number of images links reached around 2000!

The thing that I thought would solve the issue is to split my html code into separate pieces (html, js, css...).

And that is where I got stuck!

Kindly, I need your help on how to save these href urls or links in a separate file then call them individually from the html.

Here is what I did (again, I am not an expert):

index.html

<!DOCTYPE html>
<meta charset="UTF-8">
<head>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <h2>Search for Image</h2>

    <input type="button" id="mybutton" value="Search!">
    <input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>

    <a href="div_section.html"></a>
    <script src="javascripts/main.js"></script> 
</body>

main.js

$(document).ready(function() {
    $("#mybutton").on('click', function() {
        var mysrchbox = $("#myinput").val();
        mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
        var val = $.trim(mysrchbox);
        if (val === "") {
            $('#none').show();
            $('img').hide();
        } else {
            val = val.split(" ").join("\\ ");
            if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
                $('#none').show();
                $('img').hide();
            } else {
                $('#none').hide();
                $('img').hide();
                $("img[alt*=" + val + " i]").show();
                $("img[alt*=" + val + " i]").css('display', 'inline-flex');
            }
        }
    });
});

styling.css

body {
    background: white !important;
}

#images {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-basis: 33.3%;
    width: 100%;
    margin: auto;
    text-align: center;
}

#images img {
    background: white;
    position: relative;
    margin: auto;
    display: none;
    object-fit: contain;
    height: max-content;
    padding: 0.5rem;
    text-align: center;
    margin: auto;
}

#images img:hover {
    opacity: 0.5;
}

div_section.html

<div id="images"><span id="none" hidden="true">no result related for your search.</span>
  <a href="#"><img src="C:\Users\user\dir-to-image\bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\/Ripple-Logo.png" alt="Ripple" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\DJkf7M4VYAAgt8V.png" alt="NEM" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\litecoin-logo.png" alt="LiteCoin" width=130></a>
  <a href="#"><img src="C:\Users\user\dir-to-image\1486429998.png" alt="Stellar Lumens" width=130></a>

</div>

回答1:

Add loading="lazy" to all <img> tags
If possible, download the images, compress them with an online tool, save them in your project folder and change the src attribute to target the local images
If possible remove the jQuery and replace your code with the following

const button = document.querySelector('#mybutton')
const imgs = document.querySelectorAll('img')
const none = document.querySelector('#none')
imgs.forEach(img => img.style.display = 'none')

button.addEventListener('click', e => {
  const mysrchbox = document.querySelector('#myinput').value
  const val = mysrchbox.replace(/[^a-zA-Z ]/g, '').trim().toLowerCase()
  imgs.forEach(img => img.setAttribute('hidden', 'true'))
  if (val === '') {
    imgs.forEach(img => img.style.display = 'none')
    none.removeAttribute('hidden')
  } else {
    let showImgs = []
    imgs.forEach(img => {
      if (img.getAttribute('alt').toLowerCase().startsWith(val)) showImgs.push(img)
    })
    if (showImgs.length !== 0) {
      none.setAttribute('hidden', 'true')
      imgs.forEach(img => img.style.display = 'none')
      showImgs.forEach(img => img.style.display = 'inline-flex')
    } else {
      imgs.forEach(img => img.style.display = 'none')
      none.removeAttribute('hidden')
    }
  }
})

body {
  background: white !important;
}

#images {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-basis: 33.3%;
  width: 100%;
  margin: auto;
  text-align: center;
}

#images img {
background: white;
  position: relative;
  margin: auto;
  display: none;
  object-fit: contain;
  height: max-content;
  padding: 0.5rem;
  text-align: center;
  margin: auto;
}

#images img:hover {
  opacity: 0.5
}

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
  <script src="javascripts/main.js" defer></script>
</head>

<body>
  <h2>Search for Image</h2>

  <input type="button" id="mybutton" value="Search!">
  <input type="text" id="myinput" name="search" placeholder="search..."
    style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>

  <div id="images"><span id="none" hidden="true">no result related for your search.</span>
    <a href="#"><img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" loading="lazy" alt="eBitcoin" width=130></a>
    <a href="#"><img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" loading="lazy" alt="Ethereum" width=130></a>
    <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" loading="lazy" alt="Ripple" width=130></a>
    <a href="#"><img src="https://i.redd.it/tsmzy49d4adz.jpg" loading="lazy" alt="eBitcoin Cash" width=130></a>
    <a href="#"><img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" loading="lazy" alt="eCardano" width=130></a>
    <a href="#"><img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" loading="lazy" alt="NEM" width=130></a>
    <a href="#"><img src="https://bitkee.com/icons/litecoin-logo.png" loading="lazy" alt="LiteCoin" width=130></a>
    <a href="#"><img src="http://bittrust.s3.amazonaws.com/1486429998.png" loading="lazy" alt="Stellar Lumens" width=130></a>
  
  </div>
</body>

来源：https://stackoverflow.com/questions/65927139/my-html-script-has-a-lot-of-href-urls-and-is-causing-my-page-to-slow-down-how-t

标签

javascript

html

jquery