Javascript 在无延迟的模式中动态设置图像

我试图建立一个时间表来显示一天中的活动日程。其代码位于。无论何时，只要单击扬声器名称，就会打开一个模态，其中包含有关扬声器的一些信息和照片

然而，我在这里面临的问题是，

img

标记的

src

属性是在显示模式时设置的，当我打开模式时，图像会在大约一秒钟后设置，这看起来不是很好。我可以做些什么来确保模态仅在设置了

src

属性时显示

我正在使用jquery和w3css

---

谢谢

如果我没看错，你就不需要模态分析了。它是用w3.css中的w3 animate opacity类设置的。如果删除，模式会立即弹出。

使用jQuery中的

load

功能

注:

删除了不推荐使用的事件别名

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

您可以说，您使用jQuery。那就用它吧！ 我已经稍微更新了你的代码（JS），并在扬声器图像（HTML）后添加了一个span

请检查您的html结构和命名。按其索引访问元素是错误的。 给你的分区、跨度等上课

---

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

const info={
“David Anderson”：“David Anderson Lorem ipsum dolor sit amet”，
“John Doe”：“John Doe Lorem ipsum dolor sit amet”，
“马克·史密斯”：“马克·史密斯·洛雷姆·伊普苏姆·多洛·西特·艾米特”，
“Michael Lee”：“Michael Lee Lorem ipsum dolor sit amet”，
“史蒂夫·纽曼”：“史蒂夫·纽曼·洛雷姆·伊普苏姆·多洛·西特·艾米特”
};
函数openSpeakerBio（）{
const$name=$（此项）；
const name=$name.html（）.replace（//gi'，）；
常量imgName='./'+$name.text（）+'.png'；
常量$modal=$（'id02'）；
const$header=$modal.find（'h4'）；
常量$image=$modal.find（'.modal image'）；
常量$bio=$modal.find（'.bio'）；
常量$fusionLogo=$（'.fusion-logo-1x'）；
$header.html（名称）；
$bio.find（'span'）.html（信息[名称]）；
$image.attr（'src'，imgName）；
$image.on（'load'，function（）{
$modal.show（）；
});
$（窗口）.on（'load'，函数（）{
$fusionLogo.attr（'src'，'//new.network data clowing.co.uk/wp content/uploads/2016/08/ACCL_Logo.svg'）；
});
}
函数closeModal（）{
常量$modal=$（'id02'）；
$modal.hide（）；
}
$（函数（）{
//倾听事件
$（'speaker img'）。在（'click'，openSpeakerBio）上；
$（'speaker h3'）。在（'click'，openSpeakerBio）上；
$（'close model'）。在（'click'，closemodel'）上；
});
/*导入*/
@导入url（./assets/timeline-fonts.css）；
/*变数*/
/*基地*/
强壮的{
字号：600；
}
.垂直对齐辅助工具{
显示：表格；
身高：100%；
宽度：100%；
}
.垂直对齐中心{
/*垂直居中*/
显示：表格单元格；
垂直对齐：中间对齐；
}
.生物{
文本对齐：对齐；
}
/*时间线*/
.时间表{
左边框：4px实心#A5A5；
边框右下半径：4px；
边框右上角半径：4px；
背景：rgba（255，255，255，0.03）；
颜色：rgba（0,0,0,0.8）；
字体系列：“源Sans-Pro”，无衬线；
保证金：0自动50px自动；
字母间距：0.5px；
位置：相对位置；
线高：1.4em；
字号：1.03em；
填充：30px；
列表样式：无；
文本对齐：左对齐；
字号：100；
最大宽度：30%；
}
.时间表h1，
.时间表h2，
.时间表h3{
字体系列：“奥斯瓦尔德”，无衬线；
字母间距：1.5px；
字号：100；
字号：1.4em；
}
.时间表.活动{
边框底部：1px虚线rgba（255,255,255,0.1）；
垫底：25px；
位置：相对位置；
}
.时间线.事件：类型的最后一个{
填充底部：0；
页边距底部：0；
边界：无；
}
.时间线。事件：之前，
.时间线。事件：之后{
位置：绝对位置；
显示：块；
排名：0；
}
.时间线。事件：之前{
左：-170px；
颜色：rgba（0,0,0,1）；
内容：attr（数据日期）；
文本对齐：右对齐；
字号：100；
字号：0.9em；
最小宽度：120px；
}
.时间线。事件：之后{
盒影：04px#a5a5；
左：-37.85px；
背景:#313534；
边界半径：50%；
高度：11px；
宽度：11px；
内容：“；
顶部：5px；
}
.最大宽度{
最大宽度：700px；
}
.中间模态{
最高：40%；
}
.演讲者{
显示：内联块；
右侧填充：15px；
}
.发言人img{
宽度：75px；
}
.模态图像{
边际：1米1米0.25米0；
边框：1px实心#000000；
浮动：左；
最大宽度：100px；
}

日程


登记处
它是基于先到先得的服务器。请快点



介绍
演讲者



迈克尔·李


演辞1
演讲者



大卫·安德森


演讲2
发言者



史蒂夫·纽曼


竞争
发言者



马克·史密斯


D奖