僅在我在Chrome中調整瀏覽器窗口的大小之后，prependTo內容才會顯示

Question

一旦頁面加載到我的Squarespace網站上，我就要求將一些基本的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： http : //www.bernardodesigns.com/embed-test

Answer 1

我認為問題在於，您在twentytwenty圖像之后會立即twentytwenty插件，然后才有可能加載它們。 看來該插件要求您等待圖像加載完成后再附加該插件。

為文檔ready前綴ready解決該問題。 這樣做將導致load事件等待新圖像完成加載。

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

（ $(function() { ... })是$(document).on('ready', function() { ... })的快捷方式。）