使用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($)……