jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼
前端開發(fā)的過程中,我們會(huì)使用很多 jQuery 插件,jQuery 插件使用得多了,會(huì)導(dǎo)致網(wǎng)頁打開速度變慢。而引入的 jQuery 插件并不是每個(gè)頁面都需要的。這時(shí)候使用按需加載的方法加載 jQuery 插件會(huì)對前端性能的提升有不少幫助。按需加載的方法有很多,今天我們來說一下 jQuery 的方法。判斷網(wǎng)頁中一個(gè)元素是否存在的方法:
var $selector = $('.my-element');
if ( $selector.length > 0 ) {
// 如果存在,引入jQuery庫,或做其他操作
}
在這里,我們先判斷一下頁面是是否有 `.slideshow`,如果有,說明這個(gè)頁面有幻燈,我們加載 `jquery.cycle.min.js`這個(gè) jQuery 幻燈插件。
var $slideshow = $('.slideshow');
if ( $slideshow.length > 0 ) {
$.getScript("js/jquery.cycle.min.js").done(function() {
$slideshow.cycle();
});
}
如果需要經(jīng)常使用,我們還可以寫一個(gè)功能函數(shù):
jQuery.fn.exists = function(){ return this.length > 0; }
if ( $(selector).exists() ) {
// 如果存在,引入jQuery庫,或做其他操作
}
在一些對頁面效果要求比較多的案例中,上面的方法可以在一定程度上減少某個(gè)頁面的載入速度,從而提升用戶體驗(yàn)。
相關(guān)文章
jquery獲取多個(gè)checkbox的值異步提交給php
這篇文章主要介紹了jquery獲取多個(gè)checkbox的值異步提交給php的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個(gè)參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03
基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
自動(dòng)完成功能是指:類似百度搜索之類的輸入一個(gè)詞的一部分后就自動(dòng)提示,然后用戶可以選擇,不需要再輸入剩余部分。2011-08-08
jQuery實(shí)現(xiàn)加入收藏夾功能(主流瀏覽器兼職)
jQuery實(shí)現(xiàn)加入收藏夾功能,代碼比較簡單,兼容主流瀏覽器,下面給大家分享下2016-12-12
基于jQuery的JavaScript模版引擎JsRender使用指南
這篇文章主要介紹了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以參考下2014-12-12

