【发布时间】：2021-01-28 16:07:01
【问题描述】：
所以，我真的是脚本的初学者，我做了几个小时的研究以找到解决方案，但无法弄清楚。
我有一个“图像搜索 jquery 脚本。当我将所有内容都嵌入到一个 html 代码中时，它运行正常。然而，事情开始变得困难（浏览器速度慢、浏览器响应缓慢、计算机速度变慢......）图片链接数达到2000左右！
我认为可以解决问题的方法是将我的 html 代码拆分为单独的部分（html、js、css...）。
这就是我卡住的地方！
我需要您的帮助，了解如何将这些 href url 或链接保存在单独的文件中，然后从 html 中单独调用它们。
这是我所做的（再次强调，我不是专家）：
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');
}
}
});
});
style.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>
【问题讨论】：
-
这可能看起来很困难，我不知道您需要的所有细节，但我会考虑拥有一个图像名称和来源列表，然后在进行搜索后您可以选择动态加载使用 js 的热门搜索图片。这有意义吗？
-
例如（在初始化时）
var list = {"cat": "cat.png", "dog": "dog.jpeg" /*...etc*/}和（搜索按钮）onclick = "search()"，然后遍历列表条目以查找顶级匹配项，然后显示动态创建的顶级匹配源的Image对象 -
@OtherMe，感谢您的建议，但老实说，我不知道如何实施您的方法！
-
欢迎您，下面的答案更简单，如果可行，我相信这将是一个更好的解决方案，所以一定要先尝试。
-
@OtherMe，我试过了，不幸的是它变慢了！它比我的原始代码更需要我的机器的内存。原始代码大约需要 1GB，建议代码需要超过 1.5GB。
标签： javascript html jquery