如何使用这个 jQuery 插件/设置我的 jQuery 插件时我做错了什么？答案

【问题标题】：How do I use this jQuery-plugin/ What am I doing wrong when setting up my jQuery-plugin?如何使用这个 jQuery 插件/设置我的 jQuery 插件时我做错了什么？
【发布时间】：2014-02-04 15:38:04
【问题描述】：

我正在尝试了解如何使用 jQuery 插件，在这种情况下，THIS 插件。如果有人可以帮助我解释我做错了什么，那就太棒了:)

所以，这就是我所做的。我已经用 index.html 创建了我的基本设置：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link href="bower_components/Wallpaper/jquery.fs.wallpaper.css" rel="stylesheet" type="text/css" media="all" />
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/Wallpaper/jquery.fs.wallpaper.js"></script> 
</head>

<body>



<!-- Add your site or application content here -->  

<script>
    $("#element").wallpaper({
        source: "bekkevika3.jpg"
    });
</script>

<div id="element">
</div>

</body>
</html>

除了 style.css 之外的所有链接都加载了，因为我还没有创建它。

但是，什么也没有发生。我的 div 没有应用我选择的图像，我在这里做错了什么？

编辑

这是我打印的 html 外观的screenshot。我觉得很奇怪它知道图像的大小，但没有实际的图像..

【问题讨论】：

不知道插件是如何工作的，但我认为它将div 的背景图像设置为给定的源。但是，您的 div 是空的，因此高度为 0px。所以我猜图像加载得很好，只是你看不到它。给 div 一个 > 0 的高度，或者添加一些文本。
把你的script，尤其是link标签放在你的head标签里面，然后首先调用css然后是javascript....或者script标签到底部跨度>
给出高度没有任何区别，将标签放在头部也没有..：/

标签： jquery html jquery-plugins

【解决方案1】：

在打开开发者工具 (Firebug) 的情况下在浏览器中刷新页面并检查是否有错误...

你确定你使用正确的路径吗？：

source: "bekkevika3.jpg"

另一个原因可能是您在当前不存在的元素上应用插件。在这种情况下，您应该使用：

$(function(){
     //put here your code. It will be executed only after whole elemtnes on page will be loaded
});

编辑：

<style>
    #element { padding-top: 50%; }
</style>

【讨论】：

如前所述，我有一个错误，即我遗漏了缺少的 style.css 文件。我尝试将图像放在常规标记中，它可以很好地显示图像，所以路径是正确的 :)
把它们放在那里，但目前没有区别:(
@michaelw90，尝试添加我在答案中添加的样式。
将脚本包装在 DOM 就绪处理程序中非常棒，非常感谢 :)

【解决方案2】：

试试这个：

<script>
    $(document).ready(function(){
        $("#element").wallpaper({
            source: "bekkevika3.jpg"
        });
    });
</script>

【讨论】：