javascript-当每个元素需要不同的id时,如何仅通过加载一次图像来多次使用同一图像

概述我是编程和网站开发的新手.我正在做的项目仅用于实践,如果我的方法对您来说很满意,请提出任何更好的选择.我正在尝试开发停车场预订系统.并且在用户界面中,我想显示所有空白/已满的广告位(就像在预订电影或公交车票时一样).我找不到汽车的顶视图图标,因此我想到了使用图像代替图标.但是从图像开始,如果我在单个页面上使用50张图像,该页面将变得非常沉重.但是重要的一点是

我是编程和网站开发的新手.我正在做的项目仅用于实践,如果我的方法对您来说很满意,请提出任何更好的选择.

我正在尝试开发停车场预订系统.并且在用户界面中,我想显示所有空白/已满的广告位(就像在预订电影或公交车票时一样).

我找不到汽车的顶视图图标,因此我想到了使用图像代替图标.

但是从图像开始,如果我在单个页面上使用50张图像,该页面将变得非常沉重.

但是重要的一点是,我需要将所有元素作为单独的实体,只有这样,我才能使用它们的ID(唯一地址)进行预订.所以我想要50个具有不同ID的div,但只想对所有广告位使用一个图像,或者最多使用2个不同的图像(请牢记方向).

how to display same image multiple times using same image in javascript

我仔细研究了这个答案,发现了一段可能有用的代码：

var imgSrc = 'http://lorempixel.com/100/100';function generateImage() {  var img = document.createElement('img')  img.src = imgSrc;  return img;}for (var i = 0; i < 20; i++ ) {  document.body.appendChild(generateImage());}

虽然我可以利用JavaScript中的函数和循环来创建一个图像的多个副本,但我不知道如何将它们分配给具有不同ID的不同div标签.最佳答案使用一个功能:)

const addMessage = (element,msg,cls) => {    const patt = new RegExp("<");    const messageElement = document.createElement("div");    if (patt.test(msg)) {        messageElement.INNERHTML = msg    } else messageElement.textContent = msg;    if (cls) messageElement.classList.add(cls);    element.appendChild(messageElement);}const imgPath = "/somepath";const body = document.querySelector("body");addMessage(body,`<img src=${imgPath} >`,"img1"); //creates new divs with classes. the 3rd arg is optional

总结

以上是内存溢出为你收集整理的javascript-当每个元素需要不同的id时,如何仅通过加载一次图像来多次使用同一图像 全部内容，希望文章能够帮你解决javascript-当每个元素需要不同的id时,如何仅通过加载一次图像来多次使用同一图像 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。