Question

我有外部HTML和图片的加载问题。我想在overlay-div中加载一个外部html（examplework.html），当它完全加载时，我想显示它。

所以实际状态是：

Jquery调用Main-HTML-Page中的Click-Event：

$('#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-description，然后当每个图像都已准备好加载时，它们会被替换为图像。

但我希望在加载所有内容时显示叠加层。这个问题有解决方案吗？

Answer 1

在您的课程中添加活动加载。请尝试：为我工作

$('#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');
    }
});

Answer 2

这可行（基于this）：

$('#overlaycontent').load("examplework.html", function() {
        $(".extimgload").load(function() {
          $('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
        }).each(function() {
          if(this.complete) $(this).load();
        });
});

查看this fiddle

Answer 3

现在我有一个看起来很脏的解决方案，基于P.Franks解决方案。

var count = 0;

$('#overlaycontent').load("examplework.html", function() {  
    $('.extimgload').each(function() {
        count ++;
    });

    $('.extimgload').on('load', function() {    
        showOverlay();
    });
});  

var showOverlay = function() { 
    count --;
    if (count == 0) {
        $'#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
        $('#overlayshadow').removeClass("showloadi");
    }           
};

如何加载带有<img/>的外部html并在加载所有内容时使用jquery显示它？

3 个答案: