Question

我正在尝试学习如何在express.js上运行Web应用程序并遇到下一个问题：

在2页（时间轴，商店）上，如果我在底部包含.js文件，在30-40％的情况下加载页面时，似乎.js库未正确加载，我的图像不显示当我将相同的.js库复制到顶部时，它解决了问题，但是如果我从底部删除它们并且只保留在顶部，这也会导致一些其他问题。
在其他页面（投资组合）上，如果我只在顶部或底部包含.js库，它通常会导致并非所有图像都被加载，如果我尝试将它们也包含在顶部，我会得到完全空白的页面，如果我将它们包含在顶部或底部

Answer 1

我只看了索引页。

在时间轴/ hover.js 中，您可以通过查询宽度和高度来设置 .item-inner 的宽度和高度 img 的。

或者有时在执行javascript之前尚未加载img（当你的javascript脚本位于页面底部时）。所以它返回0。

要查看发生了什么，请改变 hover.js ：

 $(function(){
  $('.item-inner').each(function(){
    var img = $(this).find('img');
    console.log("DEBUG", img, img.height(), img.width());
    $(this).css({height:img.height(), width:img.width()});
  })
})

然后检查浏览器的控制台，您会看到当未加载图像时，至少有一个维度等于0。

执行脚本时必须小心。如果你想要更多控制，请尝试将js / jquery代码包装在：

中

$(document).ready(function () {
  //your code
});

这将等待所有元素完全加载。

PS：我是怎么发现这个问题的？我首先使用底部的脚本尝试您的页面，然后使用顶部的脚本。我检查了两个HTML页面，我看到一些元素的高度或宽度设置为0.在我的编辑器中，我搜索“宽度”这个词，然后我找到了错误设置的位置。

加载js文件时遇到问题

1 个答案: