jquery - 用户第一次访问页面时未加载某些内容，仅在 chrome 上

Question

这将很难解释，因为它真的很奇怪。但我会尽力而为。

当内容溢出包装器时，我有一个滚动条需要出现。简单的。

但是脚本或我的 html 的一部分在用户第一次访问页面时没有加载。当他第二次访问该页面时，它起作用了。

要查看它，请单击“投资组合”： http ://chuckbox.net/chromatemp/

-> 第一次，你看不到滚动条 -> 再次点击，你现在会看到它（从现在开始你会一直看到它）

我只有谷歌浏览器才有这个问题。仅供参考，我使用 jscrollpane 作为滚动条，但我认为问题不存在。

score 2 · Accepted Answer

访问该页面显示以下内容：

图像没有height设置属性，浏览器必须等待外部 CSS 或图像本身才能知道图像大小。

您有以下代码段：

  $(function(){
    $('#side-content').jScrollPane();
    $('#portfolio-content-wrapper').jScrollPane();
  });

它在加载 DOM 时调用jScrollPane插件，但这可能发生在加载外部 CSS 之前。这意味着插件在被调用时无法访问其正确的长度，除非 CSS（或所有图像）已经在浏览器缓存中（显然以后不会读取它）。

要解决这个问题，要么

在图像中包含height属性：<img src=... height=240>，或

等待外部 CSS 加载：

  $(window).load(function(){
    $('#side-content').jScrollPane();
    $('#portfolio-content-wrapper').jScrollPane();
  });

或者，您可以初始化插件ready然后重复load（如果插件允许）。

1 回答 1