Category: Javascript /Jquery / React / Bootstrap / Web

lazysizes.js使用方法, 响应式图像延迟加载JS插件, 图片延迟加载(Lazyload),图片预加载, 图片懒加载, Lazy Load Images, Lazy-Loaded Images

  我们在做wordpress主题开发时,为了实现图片的加载变快,避免不了要使用图像的懒加载技术,这里我推荐使用lazysizes.js,因为lazySizes是轻量级,不需要jQuery库,而且大小只有5kb,使用方法更简单。   图像懒加载 我先解释一下什么是图像懒加载 lazyLoader 图像延迟加载:是指当你网站有很多图像时,若一次性加载全部,那么网站会很慢,通过 lazyloader 插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。 插件名称:lazySizes 在线演… Read More

图片延迟加载(Lazyload),图片预加载, 图片懒加载, Lazy Load Images, Lazy-Loaded Images

  由于图像是Web上最重要的内容之一,因此网站上的页面加载时间很容易成为问题。 即使进行了适当的优化,图像也可能会很重。 这会对访问者必须等待才能访问您网站上的内容的时间产生负面影响。 除非您想出一种不会影响速度感知的图像加载解决方案,否则离开你的网站。 在本文中,您将了解五种延迟加载图像的方法,可以将其添加到网络优化工具包中以改善网站上的用户体验。   1. 什么是延迟加载(懒加载) 延迟加载图片是指异步加载网站上的图片,也就是说,在首屏内容完全加载后,如果用户不向下滚动,放在页面底部的图片甚至不会被加载。 很多网站都使用这种方法,但在图片较多的网站上尤为明显。浏览您最喜欢的壁纸网站以获取… Read More

轻量级响应滑块插件JQuery lightSlider, jQuery幻灯片插件, jQuery Slider with thumbnails, jQuery Slider with image thumbnails, JQuery lightSlider

  项目地址:https://github.com/sachinchoolur/lightslider 实例演示:http://sachinchoolur.github.io/lightslider/ 在线编辑:JsFiddle  |  Codepen   lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。它的特点还有: 完全响应式设计,自动适配任何设备。 可以单独设置每一个breakpoint。 画廊模式中可以创建带缩略图的幻灯片。 支持移动手机的swipe和触… Read More

纯JavaScript图片滚动slider插件, 原生JavaScript图片滚动slider插件, 图片滚动slider插件, 无需jquery的图片滚动slider插件, splidejs 用法

    轻量级触摸响应滑块插件JQuery lightSlider 的确很好用,不过今天要介绍的是无需jquery支持的图片滚动slider插件:splidejs   安装: 有 4 种方法可以在您的网站上包含 Splide。   1. NPM 推荐的安装方法是使用 NPM。安装最新的稳定版本: $ npm install @splidejs/splide   2. 下载 您可以从以下链接下载 Splide 包: https://github.com/Splidejs/splide/releases/latest/ 主要的 JavaScript 文件位于 dist 目录中。使用<script>… Read More

Chrome 运行jQuery, Chrome调试板运行jQuery,Run jQuery in Chrome Console,Include jQuery in the JavaScript Console

  第一步:复制下面的代码 通过将以下代码复制并粘贴到 Chrome 控制台中,将 jQuery 加载到当前页面中。 var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, then type (or see below for non wait option) jQuery.n… Read More

深入理解Shadow DOM, 什么是 shadow DOM, shadow DOM入门, 影子 DOM(Shadow DOM)

  shadow DOM不是超级英雄电影中的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(或简称DOM)中缺少的树封装方法。 网页通常使用来自外部源的数据和小部件,如果它们没有封装,那么样式可能会影响HTML中不必要的部分,迫使开发人员使用特定的选择器和!important 规则来避免样式冲突。 尽管如此,在编写大型程序时,这些努力似乎并不是那么有效,并且大量的时间被浪费在防止CSS和JavaScript的冲突上。 Shadow DOM API旨在通过提供封装DOM树的机制来解决这些问题。 Shadow DOM是用于创建Web组件的主要技术之一,另外两个是自定义元素和HTML… Read More

到底是什么DOM?, What, exactly, is the DOM?, 什么是 HTML DOM?

  文档对象模型或“ DOM”是网页的接口。它本质上是页面的API,允许程序读取和操纵页面的内容,结构和样式。让我们分解一下。   网页是如何构建的? 浏览器如何从源HTML文档转换为在视口中显示样式化的交互式页面的方式称为“关键渲染路径”。尽管此过程可以分为几个步骤,但是正如我在“了解关键渲染路径”一文中所介绍的那样,这些步骤可以大致分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上呈现的内容,第二阶段涉及浏览器执行呈现。 第一阶段的结果就是所谓的“渲染树”。渲染树表示将在页面上渲染的HTML元素及其相关样式。为了构建此树,浏览器需要两件事: CSSOM,表示与元素关联的样式… Read More

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

  在React- Hooks中引入了一个新概念。钩子是类的替代方法。如果您以前使用过React,那么您将熟悉简单的(功能性)组件 simple (functional) components 和类组件 class components。 Simple component const Example = () => { return <div>I'm a simple component</div> } Class component class Example extends Component { render() { return <div>I'm a class component</div>… Read More

React Hooks入门教程, React钩子入门, React钩子用法

    本教程将带你学习 如何使用React Hooks 如何定制自己的Hook   起步准备 要继续学习本教程,你应该基本了解: ES6(箭头函数,解构,类) React   项目安装 请确保已经配置好React开发环境,并且是最新版本的Node.js,再执行: npx create-react-app exploring-hooks   setState起步 首先让我们快速回顾一下React。 React是一个用于构建用户界面的库,其优点之一是React本身会强制开发人员使用严格数据流。还记得jQuery吗?使用jQuery几乎不可能清晰地构建项目,更不用说如何定义UI中的数据流… Read More

轻量级“新颖”小巧的网页内容编辑器:ContentTools, A JS library for building WYSIWYG editors for HTML content.

  介绍 ContentTools是一个美观小巧的网页内容工具(一个JS库),具备所见即所得(WYSIWYG)的编辑器功能,只需几个简单的步骤,即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了!   Github地址 https://github.com/GetmeUK   特性 ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为: 与框架无关的库不使用任何JavaScript框架(没有JQuery),但可以很好地使用它们。 灵活的ContentTools软… Read More

Javascript 箭头函数, 箭头函数基础知识, 深入理解箭头函数, JS箭头函数为何用?怎么用?何时用?

  定义 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。   语法   基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于:(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时,圆括号是可选的: (singleParam) => { statem… Read More

React Hooks钩子用法, 如何在受控表单组件上使用 React Hooks

  React Hooks 是一个闪亮的新提案,将优化 90% 的 React 代码。 根据 Dan Abramov 的说法,Hooks 是 React 的未来。 这听起来不错,但什么是 Hooks,它们将如何帮助我编写更好的代码? 很高兴你这么问。 Hooks 允许你访问函数组件中的状态和生命周期方法。 如果前面这句话对你来说很陌生,那么你应该在这里更新关于 React 的记忆。 React 团队说,它将帮助你编写没有有状态组件包袱的干净的代码。 在使用 Hooks 实现了一个准系统表单之后,我同意了他们的观点。 让我们首先在有状态组件中写一个简单的表单,我们将使用 Hooks 重写该表单,你可以决定更喜欢哪种。   设置 访问 … Read More

React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

A quick guide on setting up a React and PHP web. I love React and I still use PHP   在本文中,我将引导您为React Application设置PHP后端服务器。 要下载或浏览代码,请通过Github链接访问存储库。 通过此设置,您将能够在普通的Apache localhost而不是node js localhost:3000上运行和开发React应用,当您在开发Web应用时不想通过PHP或使用安全cookie强制进行身份验证重定向时,这很疯狂。或在应用程序启动前用PHP渲染一些东西。我还将添加SCSS支持和不错的高级功能。 好吧,现在让我们开始吧! 要… Read More

React Hook 钩子检测外部点击, React Hook 钩子监控外部点击, react onClickOutside, react-click-outside-hook

    1. 使用组件 react-cool-onclickoutside   react-cool-onclickoutside 是一个React 钩子  ,当用户在目标组件区域之外单击时触发回调。这是UI交互设计(IxD)的有用逻辑,例如关闭下拉菜单,模态或工具提示等。帮助大家❤️。   特征 React监听基于React hook的外部点击  。 Support‍♀️支持多个引用,以涵盖更多用例。 ?使用  被动事件侦听  器改善滚动性能。 ️滚动条可以从外部点击的回调中排除。 the 在事件循环中忽略某些元素。 ?使您可以在需要时停止监听外部喀哒声。 for由于某些原因支持自定义引… Read More