只有在 Chrome 中调整浏览器 window 大小后，prependTo 内容才会显示

Question

我要求在我的 squarespace 网站上加载页面后，将一些基本的 HTML 和 jQuery 添加到元素前面。但是在我调整浏览器 window 之前没有任何加载。我到处搜索类似的问题，但找不到太多。有人建议我在页面加载时触发 'resize'，但这似乎也不起作用

这是我使用的代码

<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 插件，它们还没有机会加载。插件似乎要求您等到图像加载完毕后再附加插件。

在文档 ready 上添加前缀应该可以解决问题。这样做会导致 load 事件等待您的新图像完成加载。

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

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

只有在 Chrome 中调整浏览器 window 大小后，prependTo 内容才会显示

prependTo content won't display until only after I resize the browser window in Chrome

jquery

append

squarespace