jQuery 判断元素是否存在然后按需加载内容的实现代码


Posted in jQuery onJanuary 16, 2020

前端开发的过程中,我们会使用很多 jQuery 插件,jQuery 插件使用得多了,会导致网页打开速度变慢。而引入的 jQuery 插件并不是每个页面都需要的。这时候使用按需加载的方法加载 jQuery 插件会对前端性能的提升有不少帮助。按需加载的方法有很多,今天我们来说一下 jQuery 的方法。判断网页中一个元素是否存在的方法:

var $selector = $('.my-element');
if ( $selector.length > 0 ) {
  // 如果存在,引入jQuery库,或做其他操作
}

在这里,我们先判断一下页面是是否有 `.slideshow`,如果有,说明这个页面有幻灯,我们加载 `jquery.cycle.min.js`这个 jQuery 幻灯插件。

var $slideshow = $('.slideshow');
if ( $slideshow.length > 0 ) {
  $.getScript("js/jquery.cycle.min.js").done(function() {
  $slideshow.cycle();
 });
}

如果需要经常使用,我们还可以写一个功能函数:

jQuery.fn.exists = function(){ return this.length > 0; }
 
if ( $(selector).exists() ) {
  // 如果存在,引入jQuery库,或做其他操作
}

在一些对页面效果要求比较多的案例中,上面的方法可以在一定程度上减少某个页面的载入速度,从而提升用户体验。

jQuery 相关文章推荐
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
jQuery实现轮播图效果demo
Jan 11 #jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php四种定界符详解
2017/02/16 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
智能电子应届生求职信
2013/11/10 职场文书
初中生自我鉴定
2014/02/04 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle