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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 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实现网上点歌(二)
2006/10/09 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python迭代用法实例教程
2014/09/08 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
详解python如何引用包package
2020/06/07 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
什么是会话Bean
2015/05/14 面试题
安全演讲稿大全
2014/05/09 职场文书
2015年见习期工作总结
2014/12/12 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript