javascript - 具有多个图像模态的页面在第一个模态之后不加载图像

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();
这将以 modal1Desktop 作为 secong 参数调用函数 openImgtype。这将在所有具有类 imgtype 的元素上设置 display: none，id 为 modal1Desktop 的元素除外。这就是为什么当您打开第一个模式时，图像似乎可以正确加载。但是当你打开其他模式时，图像似乎没有加载(加载了，问题是它仍然是隐藏的)。
我创建了一个 plunker 来解决您的问题:
https://plnkr.co/edit/mdNy9BVJox8U7TbOxNsT?p=preview .