Question

我正在使用ajax调用来加载给定div标记内的部分页面。代码如下：

    $("#Gallery").click(function() {
         var myUrl = $(this).attr("href");
         $("#Content").load(myUrl);
         return false;
    });

加载的页面，在本例中“Gallery.html”有一个Jquery插件，我用它来创建照片库。调用方法的代码如下：

    <script class="secret-source">
       jQuery(document).ready(function($) {
            $('#banner-fade').bjqs({
                   height      : 320,
                   width       : 620,
                   responsive  : true
            });

      });
    </script>

形成画廊的图像是：

    <ul class="bjqs">
      <li><img src="Images/Image1.jpg" title="Caption"></li>
      <li><img src="Images/Image2.jpg" title="Caption"></li>
      <li><img src="Images/Image3.jpg" title="Caption"></li>
    </ul>

我面临的问题是，当我通过ajax调用导航到Gallery.html页面时，除了图像之外整个页面都会加载。那里甚至没有图像图标。如果我第二次导航到该页面，则会显示图像。

有谁能告诉我为什么会这样，以及如何纠正它？

Answer 1

我不确切知道你曾经如何将css包含在文件中，但这里有一个可能的解释：

首先，如果您将css放在body标记中，浏览器将在没有新样式的情况下首次呈现该页面，然后再次重新呈现该页面。（见What's the difference if I put css file inside <head> or <body>?）。

然后：JQuery's ready()不保证在执行处理程序之前加载CSS。

我的想法发生在你身上（无法确定，因为我不知道你是如何收录你的文件的）：

点击“图库”链接，页面首次呈现没有样式，特别是没有包含.bjqs ul{display:none}的bjqs样式表。
执行bjqs JavaScript，修改bjqs元素的样式，但此时仍未应用css。
css被加载并且浏览器使用新样式重新呈现页面，特别是隐藏.bjqs ul并删除以前应用的样式.javascript不会再次运行，并且您将留下一个画廊的图像被CSS隐藏。这就是为什么你没有在第一次点击时看到任何东西。
您加载了其他内容，然后返回到图库（使用load）：样式表已经存在，.bjqs元素以正确的样式呈现。
JavaScript再次执行，显示图库。
页面不会再次呈现，因为浏览器在缓存中有样式表而没有再次下载。

要避免此行为，请将CSS包含在主页的head标记中。

Answer 2

请在gallery.html文件中尝试使用此代码。如果DOM已经准备就绪，它不依赖于ready（）事件。

<script class="secret-source">
function initGal() {
  jQuery('#banner-fade').bjqs({
      height      : 320,
      width       : 620,
      responsive  : true
    });
}

if (document.readyState !== 'complete') {
  jQuery(document).ready(initGal);
} else {
  initGal();
}
</script>

Jquery - 第一次单击时未加载图像

2 个答案: