Question

我有一些代码依赖于正在加载的CSS 在我在页脚上加载javascripts

之前，我在标题上加载了css

我尝试使用$(document).ready

的javascript



$(document).ready(function() {
  var bar_position, width;
  bar_position = $('body').height() - 38;
  width = $('body').width();
  console.log(bar_position);
  if (width <= 480) {
    console.log("Entered");
    $('#accounts-bar').css("top", bar_position);
  }
});

我尝试了$(window).ready，$(window).load，但所有这些都失败了。

Answer 1

你的代码真的搞砸了（除非你使用的是CoffeeScript。）这就应该是：

$(function () {
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width();
    console.log(bar_position);
    if (width <= 480) { //480 is the mobile width
        console.log("Entered");
        $('#accounts-bar').css("top", bar_position);
    }
});

Answer 2

JavaScript comments不是#，而是//

<强>错

bar_position = $('body').height() - 38 #38 is the size of the bar

从右

bar_position = $('body').height() - 38 //38 is the size of the bar

还有一堆其他错误，代码无法运行。猜测你错过了一个标签，这不是纯JavaScript，因为它缩进了块范围并且全部缺少括号/闭包。

Answer 3

将CSS加载到页眉中，JS在页脚中，并包装在一个doc-ready中，就JS代码执行之前应用的CSS而言应该没问题。我猜测你的元素没有宽度的原因是它是display: none;，或者只包含浮动元素，或者沿着这些线条的东西。换句话说 - 我认为这是一个CSS问题，而不是JS计时问题。尝试进入您的Firebug / Chrome控制台，选择相关元素并获取其宽度。

Answer 4

ready event就足够了。

使用依赖CSS样式属性值的脚本时，   引用外部样式表或嵌入样式很重要   在引用脚本之前的元素。

在代码依赖于加载的资产的情况下（例如，如果   图像的尺寸是必需的），代码应放在一个   改为加载事件的处理程序。

此外，您的JavaScript无效。如果它应该是CoffeeScript，那么你就错过了 - ＆gt;：

$(document).ready ->
  bar_position = $('body').height() - 38 #38 is the size of the bar 
  width = $('body').width() 
  console.log(bar_position)
  if (width <= 480) #480 is the mobile width
    console.log("Entered");
    $('#accounts-bar').css("top", bar_position)
  return

如果它应该是JavaScript，那么你会遇到更多问题：

$(document).ready(function(){
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width(); 
    console.log(bar_position);
    if (width <= 480) //480 is the mobile width {
      console.log("Entered");
      $('#accounts-bar').css("top", bar_position);
    }
});

Answer 5

$(window).bind("load", function() {
   // code here
});

完全加载CSS后运行Javascript

5 个答案: