Question

我正在尝试建立一个时间表来显示一天的事件安排。它的代码位于https://jsfiddle.net/2r99xu02/2/。每当您点击扬声器名称时，它会打开一个模态，其中包含有关带有照片的扬声器的一些信息。

但是，我在这里遇到的问题是img标记src属性是在显示模态时设置的，当我打开模态时，图像获得大约一秒后设置，看起来不太好。有什么我可以做的，以确保模式仅在设置src属性时显示。

我正在使用jquery和w3css

由于

Answer 1

使用jQuery中的var arr = new Array(); $('#id_submitbutton').on("click",function(){ if(languages.length>0){ for (var i=0; i<languages.length; i++){ arr.push(languages[i].name); } }else{ $("#id_submitbutton").on("click",function(event){ event.stopPropagation(); }); } $('#id_languages').val(arr); });函数。

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

删除已弃用的事件别名

.load，.unload和.error，自jQuery 1.8以来已弃用，已不复存在。   使用.on（）注册监听器。

你说，你使用jQuery。然后用它！我已经更新了你的代码（JS）并在扬声器图像（HTML）之后添加了 span 。

请检查您的html结构和命名。按索引访问元素是不好的。给你的divs，span等课程。

该演示无效，因为图像不可用。请自己检查一下。这只是一个如何做到这一点的例子。

load

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;
}

Answer 2

如果我正确解读你不想要莫代尔叛变。它使用来自w3.css的类w3-animate-opacity设置。如果删除该模式会立即弹出。

在模态中动态设置图像，没有延迟

2 个答案: