网站使用lightSlider产品图库报错：$(...).lightSlider is not a function

兄弟，这个报错我处理过N次了，本质就是代码执行时，lightSlider这个方法还没被注册到jQuery的原型上，给你列几个最靠谱的排查方向：

1. 先查jQuery与lightSlider的加载顺序 #

lightSlider是jQuery的插件，必须先加载jQuery，再加载lightSlider的JS文件。你可以按F12打开浏览器开发者工具，切换到「网络」标签，看JS文件的加载顺序：

• 先确认jquery.js（或压缩版jquery.min.js）已经加载完成
• 再加载lightslider.js（或lightslider.min.js）
  要是顺序反了，直接调整页面里<script>标签的位置就行。

2. 排查jQuery冲突问题 #

有时候页面里会引入多个jQuery版本，或者其他库（比如Prototype、MooTools）占用了$符号，导致lightSlider绑定的jQuery实例和你调用的不是同一个：

• 先试试把初始化代码里的$换成jQuery，比如：

  jQuery("#your-slider-id").lightSlider({
    // 你的滑块配置项
  });
  

• 如果是多版本jQuery冲突，建议只保留一个兼容lightSlider的最新版本，多余的直接删掉。

3. 确认lightSlider文件是否真的加载成功 #

还是在开发者工具的「网络」标签里，搜索lightslider：

• 如果找不到这个文件，说明引用路径写错了，检查<script src="...">里的路径是不是少了/plugins/这类前缀？
• 如果文件加载了但状态码是404，说明服务器上根本没有这个文件，核对一下文件实际存放位置和页面引用路径是否一致。
• 也可以直接点击文件的URL，看能不能打开，确认文件内容没有损坏。

4. 确保初始化代码在正确时机执行 #

如果你的初始化代码写在<head>里，或者DOM元素还没渲染出来就执行了，也会报这个错：

• 最简单的办法是把初始化代码移到页面底部（</body>标签之前）
• 或者用jQuery的ready方法包裹代码：

  jQuery(document).ready(function() {
    jQuery("#your-slider-id").lightSlider({
      // 配置项
    });
  });
  

• 也可以用原生JS的DOMContentLoaded事件：

  document.addEventListener('DOMContentLoaded', function() {
    jQuery("#your-slider-id").lightSlider({
      // 配置项
    });
  });
  

额外提醒：别漏了lightSlider的CSS #

虽然这个报错是JS问题，但顺便提一句，要是没加载lightslider.css，滑块样式会乱成一团，记得确认<link href="path/to/lightslider.css">也正确引用了。

先从加载顺序和文件路径这两个最常见的问题入手排查，大概率能解决问题。

内容的提问来源于stack exchange，提问作者allen