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>

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

Leave a Comment