lazyload is not a function解决方式

来源:博客园 分类: 文章浏览史 发布时间:2020-03-20 13:13:26 最后更新:2020-03-20 浏览:668
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-03-20 13:13:26

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

当你尝试下面的代码段,会报出$("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($)……

php技术微信