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

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标签中，浏览器将在没有新样式的情况下第一次呈现页面 ，然后再次重新呈现页面 。 （如果我把css文件放在<head>或<body>中，有什么区别？）。

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

我觉得发生在你身上（无法确定，因为我不知道你是如何包含你的文件的）：

您单击“图库”链接，页面首次呈现没有样式，特别是没有bjqs样式表，其中包含.bjqs ul{display:none} 。
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 个解决方案

解决方案1
1 已采纳 2013-12-29 10:22:34

解决方案2
0 2013-12-28 23:00:59

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-12-29 10:22:34

解决方案2 0 2013-12-28 23:00:59

解决方案1
1 已采纳 2013-12-29 10:22:34

解决方案2
0 2013-12-28 23:00:59