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

【问题标题】：Jquery - Images not loading on the first clickJquery - 第一次单击时未加载图像
【发布时间】：2013-12-28 20:07:12
【问题描述】：

我正在使用 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 页面时，除了图像之外，整个页面都会加载。那里甚至没有图像图标。如果我再次导航到该页面，图像就会出现。

谁能告诉我为什么会发生这种情况以及如何纠正它？

【问题讨论】：

此解决方案可能会有所帮助：stackoverflow.com/a/5402812/1085891
加载图库时可能（并且很有可能）没有触发 ready() 事件。但是，当重新进入页面时，gallery.html 的缓存版本会被加载，从而及时响应 ready() 事件。
你能告诉我们你是如何在你的页面中包含不同的脚本的吗？（作为一个快速的想法：如果您在 Gallery.html 文件中包含 css，请尝试将其包含在主 html 文件中）
我将所有的 css 都移到了主 html 文件中，它现在可以工作了。我尝试将代码更改为不包括以下一个答案中建议的 ready event() ，但这并没有解决问题。我不确定移动 css 有什么帮助，所以如果有人能告诉我，我会很高兴..

标签： javascript jquery html css ajax

【解决方案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 标记中。

【讨论】：

谢谢..这解释了我面临的问题。

【解决方案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>

【讨论】：

我试过这个。它不起作用。看起来问题不在 ready() 事件中。我将所有的 css 文件都移到了 index.html 中，并且代码开始正确响应。我仍然不知道为什么..