如何在UI上动态显示图像？
杨无尘
问题内容：
问题答案：
我正在显示由HTML表和图像组成的屏幕，而HTML表是完全动态的。
代码工作流程
当用户正在加载页面（带有URL）时，我将在不同部分呈现HTML表，这意味着该页面已加载。我一次获取所有表数据为’JSON’格式，然后在加载满表时UI的gap（Interval）中一次显示3-3行，3 seconds然后显示图像一段时间，然后再显示一次加载表并在加载表后显示图像，所以它工作正常，现在我想做的是动态显示图像
我要做什么
目前我这样做是因为文件夹中只显示一个图像，但是现在Counter A有两个图像或3个图像或其他可能的图像，所以当页面加载时，我正在将哪个图像加载到这样的对象中var images = {“Counter A”:[“CounterA1.jpg”, “CounterA2.jpg”]}作为Counter还有一个类似的其他计数器的两个图像，所以我想做的是先加载表，然后，当加载表完成时试图显示第一个图像而不是再次加载表而不是显示图像2 这就是为什么我在数组中有图像链接的原因，我唯一的问题是一次显示一张图像
工作流程
表格加载-> 3秒后->表格的下3行，直到表格的最后一页->再次显示Image1（CounterA1.jpg）->再次加载表格->再次显示Image2（CounterA2.jpg）->然后再次表格->然后再次Image1，因为只有两个图像
我已经完成了显示HTML表和仅显示一个图像的图像的操作，现在我想静态地动态地执行该操作
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)
interval = window.setInterval(showRows, 3000); // seting interval to show table in parts
}
function hideImage() {
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 3000);
}
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);
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');
}
}
}
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>
我已经注释掉了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，table的情况下-> Image2，但在此表格后，这两个图像都在另一个下方渲染，请检查我的代码段
问题答案：
尝试这样。
我介绍了一个新功能来格式化中的图像HTML。然后得到它的长度和循环，引入了一个cnt（count）变量并使它递增。并使用取模来找到数字并重复图像。
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>
类似资料：
-
我遵循这个例子：https://docs.mapbox.com/android/maps/examples/symbol-layer-info-window/ 也在这里： https://github.com/mapbox/mapbox-android-demo/blob/master/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroid
-
问题内容： 我希望根据flask应用程序上的用户输入来创建动态图。但是我收到以下错误：预期的字符串参数，得到了“字节” 如果我使用io.BytesIO（），则不会收到此错误，但不会在test.html上获取图 Test.html 问题答案： 使用及以后 工作实例
-
我写了一个代码，我在GridView中显示图像，但现在我想在每个图像的底部显示文本。 我想这样展示我的网格: 但是像这样[还想为图像显示文本]： main.xml：
-
问题内容： 我正在使用PIL库进行一些图像编辑。关键是，我不想每次都将图像保存在HDD上以在资源管理器中查看它。是否有一个小模块可以使我设置窗口并显示图像？ 问题答案： 从PIL教程中： 一旦有了 Image 类的实例，就可以使用该类定义的方法来处理和操纵图像。例如，让我们显示刚刚加载的图像： 更新： 如今，该方法已正式记录在PIL的Pillow分支中，并说明了如何在不同的OS上实现该方法。
-
问题内容： 我正在尝试在Swift PickerView中使用图像。我不知道如何使图像实际出现在组件中。我知道如何使用带有titleForRow函数的Strings来执行此操作，但是我不知道如何使用图像来执行此操作。到目前为止，这是我的代码： 问题答案： 您将需要为UIPickerViewDelegate协议实现更多的委托方法。特别是rowHeight委托方法和viewForRow委托方法。 就像
-
我正在尝试用laravel动态显示菜单。 我有两个表，一个是主类，另一个是子类 下面是分类表的结构 子类别结构 这是我尝试过的 我面临的问题是，由于foreach循环，它每次都会复制主类别，例如 如您所见，每次显示子类别时，它都会复制主类别。我怎么能显示主要类别一次，然后所有子类别下面它 我有另一个模板，它有不同的菜单HTML结构 它一次又一次地生成ul和div，从而导致html错误