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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery手风琴的简单制作
May 12 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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中常见的mongodb查询操作
2013/06/20 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php正则修正符用法实例详解
2016/12/29 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP重载基础知识回顾
2020/09/10 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
自我评价范文
2013/12/22 职场文书
采购部部长岗位职责
2014/02/06 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
团支部书记竞选稿
2015/11/21 职场文书
党组织结对共建协议书
2016/03/23 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python