我有一个外部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/

10-12 12:59
查看更多