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:Usersuserdir-to-imageitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-imagecryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-image/Ripple-Logo.png" alt="Ripple" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-image/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-imagecardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-imageDJkf7M4VYAAgt8V.png" alt="NEM" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-imagelitecoin-logo.png" alt="LiteCoin" width=130></a>
<a href="#"><img src="C:Usersuserdir-to-image1486429998.png" alt="Stellar Lumens" width=130></a>
</div>
question from:
https://stackoverflow.com/questions/65927139/my-html-script-has-a-lot-of-href-urls-and-is-causing-my-page-to-slow-down-how-t 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
