Varun Sharma Varun Sharma - 26 days ago 10
CSS Question

Setting image dynamically in a modal without delay

I am trying to build a timeline for displaying schedule of events on a day. The code for the same is located at https://jsfiddle.net/2r99xu02/2/. Whenever, you click the speaker names, it opens a modal with some info about the speaker with a photograph.

However, the issue I am facing here is that the

img
tag's
src
attribute is set at the time of displaying the modal and it when I open the modal, the image gets set about a second later which does not look very good. Is there anything I can do to ensure that the modal only shows when the
src
attribute has been set.

I am using jquery and w3css

Thanks

Answer Source

Use the load function from jQuery.

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

Removed deprecated event aliases

.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

You say, you use jQuery. Then use it! I've updated your code a little bit (JS) and added a span after the speaker image (HTML).

Please check your html structure and naming. To access elements by its index is bad. Give classes to your divs, spans etc.


The demo is not working, because the images are not available. Please check this by yourself. This is only an example how you can do it.

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>