在没有延迟的情况下以动态模式动态设置图像

Question

我正在尝试构建时间线来显示一天中的事件时间表。该代码位于https://jsfiddle.net/2r99xu02/2/。每当你点击发言人名称时，它会打开一个模式，其中包含有关与发言者有关的照片的一些信息。

不过，我这里面临的问题是，img标签的src属性设置为显示和它当我打开模式，图像被后来着手第二模态的时间，这不很好看。有什么我可以做的，以确保只有当设置src属性时，模态才会显示。

我使用jQuery和w3css

感谢

Answer 1

使用jQuery中的load函数。

注：https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

删除过时事件别名

.load，.unload和.error，因为jQuery的1.8过时，没有更多的。 使用.on（）注册侦听器。

你说你用jQuery。然后使用它！ 我已经更新了您的代码（JS），并在发言者图像（HTML）后添加了范围。

请检查您的html结构和命名。按索引访问元素是不好的。 给类的div的，跨度等

---

演示是不工作的，因为图像是不可用的。请 自己检查一下。这只是一个例子，你可以做到这一点。

const info = { 
 
    'David Anderson': ' David Anderson Lorem ipsum dolor sit amet', 
 
    'John Doe': 'John Doe Lorem ipsum dolor sit amet', 
 
    'Mark Smith': 'Mark Smith Lorem ipsum dolor sit amet', 
 
    'Michael Lee': 'Michael Lee Lorem ipsum dolor sit amet', 
 
    'Steve Newman': 'Steve Newman Lorem ipsum dolor sit amet' 
 
}; 
 

 
function openSpeakerBio() { 
 
    const $name = $(this); 
 

 
    const name = $name.html().replace(/<br\s*\/?>/gi, ' '); 
 

 
    const imgName = './' + $name.text() + '.png'; 
 

 
    const $modal = $('#id02'); 
 
    const $header = $modal.find('h4'); 
 
    const $image = $modal.find('.modal-image'); 
 
    const $bio = $modal.find('.bio'); 
 
    const $fusionLogo = $('.fusion-logo-1x'); 
 

 
    $header.html(name); 
 
    $bio.find('span').html(info[name]); 
 
    $image.attr('src', imgName); 
 

 
    $image.on('load', function() { 
 
     $modal.show(); 
 
    }); 
 

 
    $(window).on('load', function() { 
 
     $fusionLogo.attr('src', '//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.svg'); 
 
    }); 
 
} 
 

 
function closeModal() { 
 
    const $modal = $('#id02'); 
 

 
    $modal.hide(); 
 
} 
 

 
$(function() { 
 
    // listen for events 
 
    $('.speaker img').on('click', openSpeakerBio); 
 
    $('.speaker h3').on('click', openSpeakerBio); 
 
    $('.close-modal').on('click', closeModal); 
 
});

/* Import */ 
 

 
@import url(./assets/timeline-fonts.css); 
 

 
/* Variables */ 
 

 

 
/* Base */ 
 

 
strong { 
 
    font-weight: 600; 
 
} 
 

 
.vertical-alignment-helper { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.vertical-align-center { 
 
    /* To center vertically */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.bio { 
 
    text-align: justify; 
 
} 
 

 

 
/* Timeline */ 
 

 
.timeline { 
 
    border-left: 4px solid #a5a5a5; 
 
    border-bottom-right-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
    background: rgba(255, 255, 255, 0.03); 
 
    color: rgba(0, 0, 0, 0.8); 
 
    font-family: "Source Sans Pro", sans-serif; 
 
    margin: 0 auto 50px auto; 
 
    letter-spacing: 0.5px; 
 
    position: relative; 
 
    line-height: 1.4em; 
 
    font-size: 1.03em; 
 
    padding: 30px; 
 
    list-style: none; 
 
    text-align: left; 
 
    font-weight: 100; 
 
    max-width: 30%; 
 
} 
 

 
.timeline h1, 
 
.timeline h2, 
 
.timeline h3 { 
 
    font-family: "Oswald", sans-serif; 
 
    letter-spacing: 1.5px; 
 
    font-weight: 100; 
 
    font-size: 1.4em; 
 
} 
 

 
.timeline .event { 
 
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); 
 
    padding-bottom: 25px; 
 
    position: relative; 
 
} 
 

 
.timeline .event:last-of-type { 
 
    padding-bottom: 0; 
 
    margin-bottom: 0; 
 
    border: none; 
 
} 
 

 
.timeline .event:before, 
 
.timeline .event:after { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
} 
 

 
.timeline .event:before { 
 
    left: -170px; 
 
    color: rgba(0, 0, 0, 1); 
 
    content: attr(data-date); 
 
    text-align: right; 
 
    font-weight: 100; 
 
    font-size: 0.9em; 
 
    min-width: 120px; 
 
} 
 

 
.timeline .event:after { 
 
    box-shadow: 0 0 0 4px #a5a5a5; 
 
    left: -37.85px; 
 
    background: #313534; 
 
    border-radius: 50%; 
 
    height: 11px; 
 
    width: 11px; 
 
    content: ""; 
 
    top: 5px; 
 
} 
 

 
.width-max { 
 
    max-width: 700px; 
 
} 
 

 
.middle-modal { 
 
    top: 40%; 
 
} 
 

 
.speaker { 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
} 
 

 
.speaker img { 
 
    width: 75px; 
 
} 
 

 
.modal-image { 
 
    margin: 1em 1em 0.25em 0; 
 
    border: 1px solid #000000; 
 
    float: left; 
 
    max-width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="w3-sand w3-large"> 
 

 

 
    <div class="w3-container " id="schedule"> 
 
    <div class="w3-content width-max "> 
 
     <h4 class="w3-center p2t p1b"><span class="w3-tag w3-wide ">SCHEDULE</span></h4> 
 
    </div> 
 
    <ul class="timeline "> 
 
     <li class="event" data-date="09:30 - 10:00 "> 
 
     <div onclick="document.getElementById('id01').style.display='block'"> 
 
      <h3 class="event-title">Registration</h3> 
 
      <p>It is on first come first server basis. Pls hurry</p> 
 
     </div> 
 
     </li> 
 
     <li class="event" data-date="10:00 - 10:30 "> 
 
     <div> 
 
      <h3 class="event-title">Introduction</h3> 
 
      <p><strong> Speaker </strong> 
 
      <br /> 
 
      </p> 
 
      <div class="speaker"> 
 
      <img src="./avatar.png" alt="Boss" class="w3-circle"> 
 
      <h3>Michael<br />Lee</h3> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="event" data-date="10:30 - 11:15 "> 
 
     <div> 
 
      <h3 class="event-title">Speech 1</h3> 
 
      <p><strong> Speaker </strong> 
 
      <br /> 
 
      </p> 
 
      <div class="speaker"> 
 
      <img src="./avatar.png" alt="Boss" class="w3-circle"> 
 
      <h3>David<br />Anderson</h3> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="event" data-date="11:30 - 12:15 "> 
 
     <div> 
 
      <h3 class="event-title">Speech 2</h3> 
 
      <p><strong> Speakers </strong> 
 
      <br /> 
 
      </p> 
 
      <div class="speaker"> 
 
      <img src="./avatar.png" alt="Boss" class="w3-circle"> 
 
      <h3>Steve<br />Newman</h3> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="event" data-date="12:30 - 13:15 "> 
 
     <div> 
 
      <h3 class="event-title">Competetion</h3> 
 
      <p><strong> Speakers </strong> 
 
      <br /> 
 
      </p> 
 
      <div class="speaker"> 
 
      <img src="./avatar.png" alt="Boss" class="w3-circle"> 
 
      <h3>Mark<br />Smith</h3> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="event" data-date="14:00 - 14:45 "> 
 
     <div> 
 
      <h3 class="event-title">Prize Distribution</h3> 
 
      <p><strong> Speaker </strong> 
 
      <br /> 
 
      </p> 
 
      <div class="speaker"> 
 
      <img src="./avatar.png" alt="Boss" class="w3-circle"> 
 
      <h3>John<br />Doe</h3> 
 
      </div> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <!-- Modals --> 
 

 
    <div id="id01" class="w3-modal w3-grayscale"> 
 
    <div class="w3-modal-content w3-card-4 w3-animate-opacity middle-modal"> 
 
     <header class="w3-container w3-khaki w3-display-container"> 
 
     <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-khaki w3-display-topright"><i class="fa fa-remove"></i></span> 
 
     <h4>Register</h4> 
 
     </header> 
 
     <div class="w3-container bio"> 
 
     <p>Registration link goes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="id02" class="w3-modal"> 
 
    <div class="vertical-alignment-helper"> 
 
     <div class="vertical-align-center"> 
 
     <div class="w3-modal-content w3-card-4 w3-animate-opacity"> 
 
      <header class="w3-container w3-khaki w3-display-container"> 
 
      <span class="w3-button w3-khaki w3-display-topright close-modal"><i class="fa fa-remove"></i></span> 
 
      <h4></h4> 
 
      </header> 
 
      <div class="w3-container bio"> 
 
      <img alt="Speaker" class="w3-round modal-image"> 
 
      <span></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

如果我unterstand正确你不想模态anmiation。它由来自w3.css的类w3-animate-opacity设置。如果您删除了即时弹出的Modal。