如何在UI上动态显示图像? [英] How to display Image dynamically on UI?
问题描述
我正在显示由HTML表和图像组成的屏幕,而HTML表是完全动态的.
I am working on Displaying a screen which is consist of HTML table and Image, an HTML table is fully dynamic.
代码工作流程
当用户正在加载页面(带有URL)时,我在不同部分渲染HTML表,这意味着该页面已加载.我一次获取所有JSON格式的表数据,然后一次在3 seconds
的gap(Interval)的UI
上一次显示3-3行,当加载完整表时,然后显示一段时间之后,再次加载表格并在加载表格后显示图像,所以它工作正常,现在我想做的是动态显示图像
When user is loading a page (With URL) I am rendering a HTML table in different parts which means that page is loaded. I am Getting all the table data in 'JSON' format at once and then showing 3-3 rows at a time on UI
in the gap(Interval) of 3 seconds
When full table is loaded Then I am showing The Image for some time and after that again loading Table and showing image once table is loaded, So it is working fine,Now what I am trying to do is Show the Image dynamically
我要做什么
目前,我的操作方式与<img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">
相似,因为文件夹中仅显示一个图像,但是现在Counter A
具有两个图像或3个图像或其他可能的图像,所以当页面加载时,我得到的是哪个图像像这样在计数器A的var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
对象中加载同样有两个其他计数器的图像,所以我要做的是先加载表,然后在加载表完成后尝试显示第一个图像加载表,而不是显示图片2
这就是为什么在数组中有图像"链接的原因,我唯一的问题是一次显示一个图像
Currently I am doing it like <img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">
because there was only one Image to Show in folder, but now Counter A
has two Images or 3 or whatever it may be So When Page is loading I am getting the Which Image is to be loaded in object like this var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
for Counter A there are Two Images similarly for other counters also, SO what I am trying to do is Load table first then, When loading table completed trying to show first Image than again load table than show Image 2
That's why I have Images link inside an array, my only Issue is to show one Image at a Time
工作过程
表加载-> 3秒后->表的下3行,直到表的最后一页->显示Image1(CounterA1.jpg)->再次加载表->显示Image2(CounterA2.jpg)->然后再次表->然后再输入Image1,因为只有两个图像
Table loading -> after 3seconds -> next 3 rows of table until the last page of table -> show Image1 (CounterA1.jpg) -> load table again -> show Image2(CounterA2.jpg) ->then again table -> then again Image1 because there are only two Images
我已经完成了显示HTML表和仅显示一个图像的图像的工作,现在我想静态地动态进行操作
I have already done showing HTML table and showing Image with only one Image and statically now I want to do That dynamically
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"]}
I have commented out all the lines in my JS
code for better Understanding, here as you can see in my uploaded picture image
is common folder so I can set it manually at src
and counter and their Image I am getting like this 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');
}
}
我做得还多,我想我已经接近了预期的结果,问题是它在另一个下面显示了一个图像,这是不正确的,我试图做的是在有两个图像的情况下->图片1,表格->图片2,但在此表格之后,这两个图片都在另一个下方呈现,请检查我的代码段
I have done bit more I think I am near to get the expected result, The issue is it is showing Image one below other which is not true what I am trying to do is when there are Two Images then table --> Image1, table --> Image2 but here after table both Image are rendering one below other please check my snippet
这是我的图像呈现方式
This is how my Image is rendering
和
推荐答案
尝试这样.
我引入了一个新功能来格式化HTML
中的图像.然后得到它的长度和循环,引入一个cnt
(count)变量并使它递增.并使用取模运算来找到数字并重复图像.
I have introduced a new function to format image in HTML
. and then got its length and loop introduced a cnt
(count) variable and made it to increment. and used modulo to find the number and repeated the images.
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>
这篇关于如何在UI上动态显示图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!