我有一个外部html和图像的加载问题。我想在overlay div中加载一个外部html(examplework.html
),当它完全加载时,我想显示它。
所以实际情况是:
对HTML主页中的单击事件进行Jquery调用:
$('#overlaycontent').load("examplework.html", function() {
$('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
});
examplework.html如下所示:
<div class="workdetail">
<p>TEXT</p>
<img class="extimgload" src="http://mydomain.de/works/1.jpg" alt="Description">
<img class="extimgload" src="http://mydomain.de/works/2.jpg" alt="Description">
<img class="extimgload" src="http://mydomain.de/works/3.jpg" alt="Description">
</div>
Html主页和example.work位于同一文件夹中。
图像的
src
属性是绝对路径(因为相对路径可能导致问题,我在这里的另一个讨论中读到过)现在加载并显示
examplework.html
,而不是加载。那很好。但是图像还没有加载,所以我看到了3个alt描述,当每个都准备好加载时,它们将被替换为图像。但是我想在所有东西都装上的时候展示一下覆盖图。
这个问题有解决办法吗?
最佳答案
在类中添加事件加载。请尝试:为我好好工作
$('#overlaycontent').load("content.html", function() {
$(".extimgload").on('load', function() {
$('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
})
});
更新
$(document).ready(function() {
count=0;
$('#overlaycontent').load("content.html", function() {
$(".extimgload").each(function() {
$(this).on('load', function() {
call();
})
})
});
function call(){
count++;
if (count == $(".extimgload").length)
$('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
}
});
关于jquery - 加载所有内容后,如何使用<img>加载外部html并使用jquery显示它?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33414435/