prependToコンテンツはChromeのブラウザウィンドウのサイズを変更しないと表示されない限り表示されません

Question

私の四角形のサイトにページが読み込まれると、基本的なHTMLとjQueryが要素の前に追加されます。しかし、ブラウザウィンドウのサイズを変更するまでは何もロードされません。私は似たような問題について全面的に検索し、多くを見つけることができませんでした。私は

<script> $(window).load(function() { $("<div id='container1'> <img src='http://www.kantoliving.com/wp-content/uploads/2016/06/PMX700-Profile.jpg' /> <img src='http://www.kantoliving.com/wp-content/uploads/2016/06/PMX700-Extends.jpg' /> </div>").prependTo(".site-page");}); </script> 

<script>$(window).load(function(){ 
    $("#container1").twentytwenty(); 
});</script> 

を使用していたコードは、ここで私はこれをテストしていますページのURLですされて一人は、私は、ページの読み込みに「サイズを変更」引き金と示唆したが、それはここで

のいずれかを動作していないようでしたon：http://www.bernardodesigns.com/embed-test

Answer 1

画像を追加する直前にtwentytwentyプラグインを添付していて、読み込むチャンスがある前に問題があると思います。プラグインは、プラグインを添付する前に画像が読み込まれるまで待つ必要があります。

文書の先頭にreadyを追加すると問題が解決するはずです。そうすることで、loadイベントが新しいイメージの読み込みを待機するようになります。

$(function() { 
    $('...').prependTo('.site-page'); 
}); 
$(window).load(function() { 
    $('#container1').twentytwenty(); 
}); 

（$(function() { ... })は$(document).on('ready', function() { ... })のショートカットです。）