$("img").lazyload is not a function解决方式

来源:互联网 发布:淘宝商家有天猫标志 编辑:程序博客网 时间:2024/06/05 14:12

在wordpress中使用jQuery图片延迟加载插件时,可能会报出$("img").lazyload is not a function的错误。
(关于如何使用lazyload插件,请看另外一篇文章:jquery插件实现图片延迟加载)
即使你将$替换成jQuery,它还是会出现这样的错误:jQuery("img").lazyload is not a function,就像下面这幅图中所看到的。

SNAGHTML382e03

当你尝试下面的代码段,会报出$("img").lazyload is not a function

<script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.min.js"></script><script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.lazyload.js"></script><script type="text/javascript">    $(document).ready(function () {        $("img").lazyload({            placeholder: "http://jileiba.com/wp-includes/images/loading03.gif",            effect: "fadeIn"        });    });</script>

你可能会猜想$符号已经被别的插件使用了,是必会造成冲突的。于是你又想起使用jQuery的原生类jQuery($符号在jQeury中只是充当类的一个代名词)

<script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.min.js"></script><script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.lazyload.js"></script><script type="text/javascript">    jQuery(document).ready(function () {        jQuery("img").lazyload({            placeholder: "http://jileiba.com/wp-includes/images/loading03.gif",            effect: "fadeIn"        });    });</script>

它却仍然报出一个错误(在Firefox中Shift + Ctrl + J快捷键可以查看浏览器提示了哪些js错误,chrome浏览器会和谐js错误):jQuery("img").lazyload is not a function。即使你曾经使用jQuery.noConflict();去尝试解决冲突,这个冲突还是存在,它可真是挥之不去。

用wordpress的朋友们经常会用到各种插件,其中很多插件是基于jQuery的,造成这样的冲突在所难免。
那么现在就教大家如何解决这类冲突吧,希望你们不要在碰到好用的插件时,却在自己的博客中无法启用。
这种方法简单概括为:在使用jQuery类时使用jQuery,在使用函数时使用$符号。

<script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.min.js"></script><script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.lazyload.js"></script><script type="text/javascript">    jQuery(document).ready(function ($) {        $("img").lazyload({            placeholder: "http://jileiba.com/wp-includes/images/loading03.gif",            effect: "fadeIn"        });    });</script>

看见黄底的代码了吗?就是这么简单。
jQuery(document).ready……
function($)……