javascript - JS ギャラリーの XML ファイルからの動的コンテンツは、最初のビューではなく、ページの更新時にのみ表示されます

Question

何日にもわたる検索、デバッグ、および多くの試行錯誤の後、私はついにこの問題で終わりました。

ちょっとした背景: 私が使用している CMS には、CMS のギャラリーに「添付」された画像の XML ファイルをエクスポートできるフォト ギャラリー オプションがあります。組み込みの CMS フォト ギャラリーを使用したくないので、Galleria バージョンを選択しました。

とにかく、新しいギャラリーは現在動作していますが、ページが初めて読み込まれたときにギャラリーが表示されないという問題が発生しています。更新するか、別のページに移動してからギャラリーに戻ると、完全に機能します。

私は間違っている可能性があります (ほとんどの場合) が、この問題は、Galleria スクリプトが開始して読み込まれる前に画像が読み込まれず、何も表示されないことが原因であると思います。私はいくつかのアイデアを試みましたが、私の Javascript の知識は非常に限られており、以下のコードは他のソースからのものです...それが機能する理由であり、正しく変更できません。

ありがとう。

<script>
$(function () {
$.ajax({
type: 'GET',
    url: '/PhotoGallery.xml', //address of xml file
    dataType: 'xml',
    success: function(xml) {
    $(xml).find('img').each(function() {
    var location = '/photo_gallery/'; //Folder that container photos for gallery
    var url = $(this).attr('src');
    var alt = $(this).attr('alt');
    $('<li></li>').html('<img src="'+location+''+url+'" data-description="'+alt+'" data-link="'+location+''+url+'"/>').appendTo('.galleria-list');
    });
}
});

});
</script>

<script>
$(function(){
Galleria.loadTheme('../gallery_files/galleria.classic.min.js');

$('#galleria').galleria({
responsive: true,
height: 0.70,
autoplay: 5000,
imageMargin: 0,
lightbox: true
});
}); 
</script>