如何在 UI 上动态显示图像？

IT技术 javascript jquery html css html-table
2021-03-08 07:49:53

我正在显示由 HTML 表和图像组成的屏幕，HTML 表是完全动态的。

代码工作流程

当用户加载页面（带 URL）时，我在不同部分呈现 HTML 表，这意味着页面已加载。我一次以“JSON”格式获取所有表数据，然后在加载完整表时UI的间隙（间隔）中一次显示 3-3 行3 seconds然后我显示图像一段时间，然后再次显示加载表格并在加载表格后显示图像，所以它工作正常，现在我想做的是动态显示图像

我正在尝试做什么

目前我正在这样做，<img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">因为文件夹中只有一个图像要显示，但现在Counter A有两个图像或 3 个或任何可能的图像 所以当页面加载时，我正在var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}为 Counter获取要在这样的对象中加载哪个图像A 其他计数器也有两个类似的图像，所以我要做的是先加载表，然后加载表完成后尝试显示第一个图像，然后再加载表而不是显示图像 2 这就是为什么我在数组中有图像链接，我唯一的问题是一次显示一张图片

工作流程

表格加载 -> 3 秒后 -> 表格的下 3 行，直到表格的最后一页 -> 显示 Image1 (CounterA1.jpg) -> 再次加载表格 -> 显示 Image2(CounterA2.jpg) -> 然后再次表格 -> 然后再次 Image1 因为只有两个 Image

我已经完成了显示 HTML 表格并显示只有一个图像的图像，现在我想动态地做

显示代码片段

我已经注释掉了我的JS代码中的所有行以便更好地理解，在这里你可以在我上传的图片中看到image是公共文件夹，所以我可以手动设置它src和计数器和他们的图像我得到这样的var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}

编辑

我添加了以下代码

        var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]} // Images to be load on UI

            for (var key in images) {

            var imageList = images[key];
             console.log(imageList.length)
             for (i = 0; i < imageList.length; i++) 
                 {
                 console.log(imageList[i])
                 var img = $('<img />').attr({
                        'src': 'Image/'+key+'/'+imageList[i] , // this one is displaying Image one below other
                        'alt': 'Some Image',
                        'width': 90+"%",
                        'height':680
                    }).appendTo('#displayImage'); 
                 }

            }

我做了更多我想我已经接近得到预期的结果了，问题是它在另一个下面显示一个图像，这不是真的我想要做的是当有两个图像然后表时 --> Image1，表--> Image2 但在表之后，两个图像都呈现在其他图像下方，请检查我的代码段

这就是我的图像渲染方式 检查这个

和 这

我的图片文件夹

1个回答

像这样尝试。

我引入了一个新功能来格式化图像HTML。然后得到它的长度和循环引入一个cnt（计数）变量并使其递增。并使用模来找到数字并重复图像。

var imgLen = 0;
var cnt = 0;

var tableValue = [{
    "Item Name": "MANCHOW  V SOUP",
    "SellingPrice": 100
}, {
    "Item Name": "SMIRNOFF GREEN APPLE 60",
    "SellingPrice": 202
}, {
    "Item Name": "SMIRNOFF GREEN APPLE30",
    "SellingPrice": 101
}, {
    "Item Name": "BOMBAY SAPHIRE 750",
    "SellingPrice": 472
}, {
    "Item Name": "BOMBAY SAPHIRE 30",
    "SellingPrice": 191
}, {
    "Item Name": "BLUE RIBBAND 750",
    "SellingPrice": 877
}, {
    "Item Name": "BLUE RIBBAND 60",
    "SellingPrice": 78
}, {
    "Item Name": "BACCARDI WHITE 750",
    "SellingPrice": 248
}, {
    "Item Name": "BACCARDI WHITE 180",
    "SellingPrice": 585
}, {
    "Item Name": "BACCARDI WHITE 60",
    "SellingPrice": 202
}, {
    "Item Name": "OLD MONK 180",
    "SellingPrice": 225
}, {
    "Item Name": "OLD MONK 90",
    "SellingPrice": 168
}, {
    "Item Name": "OLD MONK 60",
    "SellingPrice": 90
}, {
    "Item Name": "OLD MONK 30 ",
    "SellingPrice": 45
}, {
    "Item Name": "DON ANGEL 750",
    "SellingPrice": 466
}, {
    "Item Name": "DON ANGEL 30",
    "SellingPrice": 191
}, {
    "Item Name": "SAUZA SILVER 700",
    "SellingPrice": 615
}, {
    "Item Name": "SAUZA SILVER 30",
    "SellingPrice": 270
}, {
    "Item Name": "LIME WATER",
    "SellingPrice": 45
}, {
    "Item Name": "PACKEGED WATER 1L",
    "SellingPrice": 39
}, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
}, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
}, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
}, {
    "Item Name": "Dhai",
    "SellingPrice": 20
}, {
    "Item Name": "Rice",
    "SellingPrice": 55
}, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
}, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
}, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
}, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
}, {
    "Item Name": "Dhai",
    "SellingPrice": 20
}, {
    "Item Name": "Rice",
    "SellingPrice": 55
}, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
}]


interval = '';
var images = {
    CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
} // Images to be load on UI
initTable(tableValue);

function initTable(tableValue) {
    addTable(tableValue)
    showRows();
    interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
}




function hideImage() {
    var imgno = (cnt%imgLen)+1;
    $("#displayImage img").css("display","none");
    $("#displayImage img:nth-child("+imgno+")").css("display","block")

    $("#displayImage").show(); //show Image and hide table
    $("#DisplayTable").hide();

    setTimeout(function () {
        initTable(tableValue);
    }, 1000);
    cnt++;
}





function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applies
    if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not
        $("#displayImage").hide(); //showing table hiding image
        $("#DisplayTable").show();
        $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    } else {
        $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

        hideImage();

        clearInterval(interval); //if last then clearing time interval and calling the function again 
    }

    $(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous  rows and show next 
}

function addTable(tableValue) {
    var $tbl = $("<table />", {
        "class": "table fixed"
    }),
        $tb = $("<tbody/>"),
        $trh = $("<tr/>");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
        $tr = $("<tr/>", {
            class: "hidden "
        });

        for (j = 0; j < 4; j++) {
            $.each(tableValue[split * j + i], function (key, value) {
                if (typeof (value) === "number") {
                    $("<td/>", {
                        "class": "text-right color" + (j + 1)
                    }).html(value).appendTo($tr);
                } else {
                    $("<td/>", {
                        "class": "text-left color" + (j + 1)
                    }).html(value).appendTo($tr);
                }

            });
        }
        $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);

}

imageFormatter();

function imageFormatter() {

    var images = {
        "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
        "Counter B": ["CounterB1.jpg", "CounterB2.jpg"]
    } // Images to be load on UI

    for (var key in images) {

        var imageList = images[key];
        for (i = 0; i < imageList.length; i++) {
            var img = $('<img />').attr({
                'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
                'alt': key + '/' + imageList[i],
                'width': 90 + "%",
                'height': 680
            }).appendTo('#displayImage');
        }

    }
    imgLen = $("#displayImage img").length;
}
tbody>tr>td {
  white-space: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,
.already-shown {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">

</div>

先生第一次去它没有显示任何图像但在第二次去它显示但只有第一个，当我在表格渲染后加载页面然后没有图像然后再次表格渲染然后图像一个然后表格然后再次空白
2021-04-25 07:49:53
等一下先生让我试试
2021-04-26 07:49:53
var images = { "Counter A": ["CounterA1.jpg", "CounterA2.jpg"], } 它只显示 CounterA1.jpg 而不是 CounterA2.jpg
2021-05-09 07:49:53
片段有同样的问题，请先检查它什么都不显示，然后在调用 intTable 时在下一个循环中显示alt值，然后显示一些图像
2021-05-15 07:49:53
增加您的超时值并检查。因为它在上面的代码片段中工作对吗？或者上面的狙击手也有同样的问题？
2021-05-18 07:49:53
其它你可能感兴趣的问题
上一篇给定 React 组件中的两次按钮单击有什么区别？ 下一篇d3.js 化工管柱状图