我正在尝试学习如何在express.js上运行Web应用程序,并且遇到下一个问题:
在2页(时间轴,商店)的底部,如果我在底部加载了.js文件,那么在页面加载时占30-40%的情况下,.js库似乎没有正确加载,当我复制相同的图像时,我的图像也没有显示.js库位于顶部,它解决了该问题,但是如果我从底部将其删除并仅保留在顶部,这也会导致其他一些问题。
在其他页面(投资组合)上,如果我仅在顶部或底部包括.js库,则通常总是导致并非所有图像都已加载,并且如果我尝试也将它们包括在顶部,则我将获得完全空白的页面,以防万一我将它们包括在其中上面或者下面
P.S:我是Web开发方面的新手,但我真的很喜欢它,并且需要学习很多东西。如果您能帮助我解决此问题,我们将不胜感激。我已将项目创建的内容上传到this link。
最佳答案
我只看了索引页。
在timeline / hover.js中,您可以通过查询子img的宽度和高度来设置.item-inner的宽度和高度。
有时,在执行javascript之前(当javascript脚本位于页面底部时)尚未加载img。因此它返回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页面,发现某些元素的height或width设置为0。在我的编辑器中,我搜索了“ width”一词,但发现它的设置错误。