Javascript 有没有更好的方法来处理图像数组的加载？

我有相关的图像组，我想能够改变，但在同一个div位置点击不同的单选按钮

目前我正在使用数组来处理html

var marketingImages = [image1HTML, image2HTML, image3HTML, image4HTML];

var salaryImages = [image1HTML, image2HTML, image3HTML, image4HTML];

当单击相关单选按钮时，会运行一个函数来清除div中可能的先前图像的html，并使用.append加载新图像

$(document).ready(function() {

    $("#marketing, #salary").click(leed);

    function leed() {

        $("#portfolio-images").html("");

        if ($("#marketing").is(':checked')) {

            var portfolioArray = marketingImages;

        } else if ($("#salary").is(':checked'))  {

            var portfolioArray = salaryImages;

        }

        for (var i=0; i<portfolioArray.length; i++) {
            $("#portfolio-images").append(portfolioArray[i]);
        }
        ...
}

这似乎很有效，但作为一个傻瓜，我不得不怀疑是否有更好的方法来处理这个问题。从技术上讲，这些图像只是缩略图，可以点击加载更大的Lightbox版本，但我不确定这对某人来说会有多好

---

有人知道有没有更好的方法来处理加载的图像组吗？谢谢。

我不确定，但为了获得更好的性能，您可以通过更改源属性重用现有的图像DOM元素。而不是每次都创建它。但是，在某些情况下，您可能没有足够的图像元素，需要添加这些元素。或其他需要移除的场合。顺便说一句，我说我不确定，因为性能优化的水平取决于你的目标平台。所以你想把的放在.html文件中，但把它们的.src从JS改成了？就平台而言，我只是从本质上考虑台式机/笔记本电脑[如果这是一个与平台相关的答案]。我认为无论您如何设置，javascipt执行所需的时间都是微不足道的。与其删除现有图像，不如将其隐藏起来，这样就不必在每次有人单击单选按钮时重新加载。延迟加载图像将是理想的。加载更少的图像所带来的性能影响将比任何javascript微优化更为重要。也许你不需要删除现有图像，而只需隐藏它们，这样就不需要在每次有人单击单选按钮时重新加载它们。这听起来是个好主意，但你能给我举个例子说明我是如何做到的吗？我可以检查一下当前的HTML是否已经包含了图像数组吗？好的，我想我已经了解了一些东西，也许没有我想象的那么复杂。谢谢所有发帖的人。