具有多个图像模态的页面在第一个模态后未加载图像

Question

我遇到了一个问题，我正在创建一个具有多个图像模式的页面。当打开第一个图像模态时，会自动加载其中的图像；当打开以下任何图像模式时，图像都不会加载，直到通过带有onclick操作的javascript按钮进行提示。我希望每次打开时都能自动加载每个模式中的第一个图像。

我是映像模式的新手，我猜我的类和ID名称设置比实际需要的要笨拙得多！感谢您的帮助。

我的HTML:

<!-- MODAL 1 -->
<div id="modal1" class="modal">
<div class="modal-content w3-animate-zoom">
<span onclick="document.getElementById('modal1').style.display='none'" class="button closebtn">&times;</span>
<div class="desc">
<h1>Headline</h1>
<h2>Subheadline</h2>
<p>Body text</p>
</div>
<div class="buttons-bar">
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal1Desktop')">Desktop View</button>
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal1Mobile')">Mobile View</button>
</div>
<div id="modal1Desktop" class="w3-container imgtype">
<img src="images/paris.jpg">
</div>
<div id="modal1Mobile" class="w3-container imgtype">
<img src="images/nature.jpg" class="mobileview">
</div>
</div>
</div>
<!-- MODAL 2 -->
<div id="modal2" class="modal">
<div class="modal-content w3-animate-zoom">
<span onclick="document.getElementById('modal2').style.display='none'" class="button closebtn">&times;</span>
<div class="desc">
<h1>Headline</h1>
<h2>Subheadline</h2>
<p>Body text</p>
</div>
<div class="buttons-bar">
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal2Desktop')">Desktop View</button>
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal2Mobile')">Mobile View</button>
</div>
<div id="modal2Desktop" class="w3-container imgtype">
<img src="images/wedding.jpg">
</div>
<div id="modal2Mobile" class="w3-container imgtype">
<img src="images/falls2.jpg">
</div>
</div>
</div>
<!-- MODAL 3 -->
<div id="modal3" class="modal">
<div class="modal-content w3-animate-zoom">
<span onclick="document.getElementById('modal3').style.display='none'" class="button closebtn">&times;</span>
<div class="desc">
<h1>Headline</h1>
<h2>Subheadline</h2>
<p>Body text</p>
</div>
<div class="buttons-bar">
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal3Desktop')">Desktop View</button>
<button class="tablink buttons-bar-item button" onclick="openImgtype(event, 'modal3Mobile')">Mobile View</button>
</div>
<div id="modal3Desktop" class="w3-container imgtype">
<img src="images/mountainskies.jpg">
</div>
<div id="modal3Mobile" class="w3-container imgtype">
<img src="images/underwater.jpg" class="mobileview">
</div>
</div>
</div>

我的Javascript:

<script>
document.getElementsByClassName("tablink")[0].click();
function openImgtype(evt, imgtypeName) {
var i, x, tablinks;
x = document.getElementsByClassName("imgtype");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].classList.remove("w3-light-grey");
}
document.getElementById(imgtypeName).style.display = "block";
evt.currentTarget.classList.add("w3-light-grey");
}
</script>

我的CSS:

/* Style the images set on the image grid. */ 
input {
width: 100%;
border: 1px solid #f6cb19;
}
.myImg {
border-radius: 0px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.3;}
/* Style the hover-over text and colors for the image grid. */
.container {
position: relative;
width: 100%;
}
.container:hover .hovertext{
opacity: 1;
}
.hovertext {
text-align: center;
pointer-events: none;
color: white;
position: absolute;
top: 150px;
left: 50%;
opacity: 0;
background-color: #ee3a38;
padding: 10px 15px;
transition: .5s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* Style the images shown within the modules. */
img {width: 100%;
vertical-align:middle;}
button,input,select,textarea{
font:inherit;
margin:0
}
button,input{
overflow:visible
}
button,select{
text-transform:none
}
button,html [type=button],[type=reset],[type=submit]{
-webkit-appearance:button
}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{
border-style:none;
padding:0
}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{
outline:1px dotted ButtonText
}
.desc 
{padding: 20px;}
.mobileview{
width: 100%; 
max-width: 320px;
margin-left: auto; 
margin-right: auto;
display: block;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
width: 80%;
margin: auto;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 33.33%; /* IE10 */
flex: 33.33%;
max-width: 33.33%;
padding: 0 20px;
}
.column input {
margin-top: 40px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* Modal-specific stuff */
.modal{
z-index:3;
display:none;
padding-top:100px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.7)
}
.modal-content{
margin:auto;
background-color:#fff;
position:relative;
padding:0;
outline:0;
width: 80%;
max-width:700px;
margin: auto;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
.w3-animate-zoom {
animation:animatezoom 0.6s;
}
@keyframes animatezoom{
from{
transform:scale(0)
}
to{
transform:scale(1)
}
}
.button:hover{
color:#000!important;
background-color:#ccc!important
}
.button{
border:none;
display:inline-block;
padding:10px 20px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:inherit;
background-color:inherit;
text-align:center;
cursor:pointer;
white-space:nowrap;
line-height: inherit !important;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.button:disabled{
cursor:not-allowed;
opacity:0.3
}
.closebtn{
color:#fff!important;
background-color:#75bed0!important;
font-size:24px!important;
position:absolute;
right:0;
top:0;
}
.closebtn:hover {
background-color:#4c9baf!important;
}
.buttons-bar .buttons-bar-item{
padding:8px 16px;
float:left;
width:auto;
border:none;
display:block;
outline:0
}
.buttons-bar .w3-dropdown-hover,.buttons-bar .w3-dropdown-click{
position:static;
float:left
}
.buttons-bar {
white-space:normal
}
.buttons-bar-block .buttons-bar-item{
width:100%;
display:block;
padding:8px 16px;
text-align:left;
border:none;
white-space:normal;
float:none;
outline:0
}
.buttons-bar-block.w3-center .buttons-bar-item{
text-align:center
}
.w3-container{
width: 100%;
padding: 20px;
background-color: #F1F1F1;
}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.buttons-bar:before,.buttons-bar:after{
content:"";
display:table;
clear:both;
}

.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{
color:#000!important;
background-color:#f1f1f1!important
}

Answer 1

页面中的图像加载正确。这里的问题是它们被隐藏了
在javascript代码中，您有以下语句：document.getElementsByClassName("tablink")[0].click();
这将调用函数openImgtype，modal1Desktop作为secong参数。这将在除id为modal1Desktop的元素之外的类为imgtype的所有元素上返回集合display: none。这就是为什么当您打开第一个模态时，图像似乎加载正确。但当您打开其他模态时，图像似乎没有加载(它已加载，问题是它仍然隐藏(
我创建了一个plunker来解决您的问题：
https://plnkr.co/edit/mdNy9BVJox8U7TbOxNsT?p=preview.