首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端-原生JS实现简单图片懒加载

什么时候用懒加载 当页面中需要一次性载入很多图片时候,往往都是需要用懒加载。 懒加载原理 我们都知道HTML中 标签是代表文档中一个图像。。说了个废话。。...随着滚动条向下滚动, bound.top会越来越小,也就是图片到可视区域顶部距离越来越小,当 bound.top===clientHeight时,图片上沿应该是位于可视区域下沿位置临界点,再滚动一点点...函数节流 在类似于滚动条滚动等频繁DOM操作时,总会提到“函数节流、函数去抖”。 所谓函数节流,也就是让一个函数不要执行太频繁,减少一些过快调用来节流。...img3请求发出来,而后面的请求还是没发出~ 全部载入时 当滚动条滚到底下时,全部请求都应该是发出,如图 ?...()方法返回值一样boundingClientRect目标元素矩形区域信息intersectionRect目标元素与视口(或根元素)交叉区域信息intersectionRatio目标元素可见比例

5.1K30

推荐几个好用前端社区

前端乱炖 http://html-js.com/ segmentfault http://segmentfault.com/ 前端网 http://www.w3cfuns.com/ w3cplus http...://www.w3cplus.com/ 前端社区有许多许多,但我个人比较推荐这四个。...第一个,html-js.com, 里面有司徒正美大神坐镇, 大名鼎鼎MVVM框架avalon.js,就是此人出品; 第二个,segmentfault 据说已经拿到风投若干,如果为真, 那必然会在内容上深耕细做...,前景可期啊 第三个,w3cfuns.com, 只是因为我在北京时候,去它办公室看过一眼,, 那时它还在石景山远洋那边, 眼看着它内容、栏目,一点点丰富,充实 第四个,w3cplus.com,...个人一孔之见吧,这四个社区,分别包含了JS,CSS,职位发展,这几个方面。 经常关注的话,会有比较好收获。 也不是说其它论坛都不如这几个,只是我眼界有限哈,只看到这几个而已。

13.6K147
您找到你想要的搜索结果了吗?
是的
没有找到

好学好用前端框架—Angular

01 百花齐放前端框架 2007 年时候我刚毕业,当时前端框架是 jQuery 和 Ext JS,那时候大家纠结问题是:我到底是用 jQuery 呢还是用 Ext JS 呢?...在这个发展过程中,框架规模和体积也在不断增大,最远古 prototype.js 和 mootools,都只有几千行 JS 代码,压缩之后体积也只有 10 K 左右。...到 2006 年 jQuery 出现时候,体积已经扩大 10 倍到 100 K 左右,庞大、完善是 Ext JS,目前 6.x 版本中,光 JS 代码就已经高达 24 万行代码了(含注释)!...因为是前端框架,所以美观问题也不能放松。...但是在 JS 里面不行,由于 JavaScript 这门语言本身缺陷,它没有提供完善模块化支持,这就导致了所有前端框架必须自己解决模块化问题。 ?

1K20

测试需求平台15-非常好用前端时间库Moment.js

✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列迭代版,拥抱Vue3.0将前端框架替换成字节最新开源arco.design,其中约60%重构和20%新增内容,定位为从 0-1手把手实现简单测试平台开发教程...Moment.js JavaScript 日期处理类库( http://momentjs.cn/ ),它提供了一些经常用时间处理方法,在node.js 和 浏览器中都可以直接使用。...安装和使用 在我们前端项目中安装和引用如下: # 终端安装依赖(笔者测试最新版本为2.24.0) npm install moment # 导入依赖 import moment from "moment...// require定义 var moment = require('moment'); moment().format(); // 浏览器script引用 <script src="moment.<em>js</em>...本篇主要讲解了几个后边要用到扩展知识点,在当今<em>的</em>开发环境生态下,有很多类似这样<em>好用</em><em>的</em>前后端开发工具包,我们要善于发现和利用它们,尽量避免无效重复造轮子,把时间花费在功能实现上。

27910

【Node.js】大前端技能通俗易懂讲解 快速入门必看

Node.js是一个基于Chrome V8引擎JavaScript运行环境,它允许开发者在服务器端执行Node.js是一个基于Chrome V8引擎JavaScript运行环境,它允许开发者在服务器端执行...它最初由Ryan Dahl于2009年开发,他发现C++开发起来比较麻烦,因此想找一种更高级语言来写服务器,于是选择了JavaScript。 Node.js主要作用是解决服务器端编程问题。...1、概述前端工具VSCode安装 vscode下载官网:Visual Studio Code - Code Editing....Redefined 插件:中文插件 搜索chinese 2、NodeJS安装 NodeJS官网下载:Node.js 下载完成后打开cmd 如果都能显示就是下载成功 node -v 查看node版本 npm...运行mysql.js查看效果

27410

处理Excel文件简单、精致JS

大家好,我是前端实验室大师兄! 在 web 开发中,管理后台生成 excel 报表并且下载,一个很常用功能,很多 Javascript 开发者也提供了很多这方面的工具来实现这一功能。...前言 对于Javascript处理 Excel 文件来说,js-xlsx 库是目前 Github 上 star 数量最多库了,功能非常强大,强大到入门时瑟瑟发抖。文档有些乱,不适合快速上手。...关于 node-xlsx Node-xlsx 是一个Node.js扩展,通过名字应该能够猜到是干什么,主要是用于解析和构建 Microsoft Excel 表格,这个插件基于 js-xlsx(也就是上面提到上手难度贼大那个...先构建数据 var data = [ ['A','B','C'], [1,2,3], [true, false, null, '前端实验室'], ['今天','是',new Date('...写在最后 欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质学习资料。

4K30

50个好用前端框架,建议收藏!

4、Webpack Config Tool 地址:webpack.jakoblind.no 一款可视化在线工具网站,你只需要选择前端项目运用到技术和相关配置,就能一键帮你生成webpack.config.js...28、Glider.js 地址:nickpiscitelli.github.io/Glider.js/ 一个超快速(25毫秒加载),轻量级(小于3KB),无依赖性(不需要jQuery)制作幻灯效果前端库...自己是从事了五年前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有? 没错,年初我花了一个多月时间整理出来学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习朋友。...32、SVGator 地址:www.svgator.com/ 如果您希望将Web图形提升到一个新水平,那么动画SVG就是您选择,而SVGator是您可以用来创建它们简单工具之一。...更少配置 更好用 基本一样api,学习成本非常低 源码非常简洁,总共就3个文件,900行,如果你想深入理解单页应用路由是怎么实现,reach-router,绝对是绝佳下手资料 42、SVGR

2.3K31

前端-CSS 核心几个概念

HTML 代码是顺序执行,一份无任何 CSS 样式 HTML 代码最终呈现出页面是根据元素出现顺序和类型排列。块级元素就从上到下排列,遇到内联元素则从左到右排列。...这种无样式情况下,元素分布叫普通流,元素出现位置应该叫正常位置(这是我瞎起),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。...符合 W3C 标准浏览器认为一个元素宽度只等于其 content 宽度,其余都要额外算。...最初 float 只是用来实现文字环绕图片效果,仅此而已。而现在 float 应用已不止这个,前辈们也是写了无数博文来深入浅出讲解它。...这里还有个东西,就是广为人知——清除浮动。具体方法五花八门,可以看这篇:那些年我们一起清除过浮动,我就不多说了。

83840

2018 值得关注前端技术

2017 JavaScript 现状报告:询问了23000名开发者,他们给出了这样答案 2018 年值得关注 JavaScript 趋势 无论如何,框架这个我觉得没有最好,只有最适合。...8.yarn VS npm 相信接触到前端工程化,模块化开发者都不可避免使用npm进行功能包安装依赖。尤其是在node.js初期,npm就是工程化一个标配。...参考资料 CSS in JS 简介 精读《请停止 css-in-js 行为》 大家对CSS in JS怎么看?...sea.js sea.js由国人开发,当时使用时候还满心欢喜,终于有国人东西登上舞台了。sea.js凭借简单,轻量等优势火极一时。...但是有了es6模块化之后,就连sea.js作者玉伯也在微博发言:应该给 Sea.js 和 KISSY 也树一块墓碑了。

1.1K31

好用轮子之强大原生引导js库---Driver.js

前言 Driver.js 是一款轻量、没有依赖普通javascript引擎,目的是为了方便引导用户浏览网站功能。其实是一款web端分步引导用户查看功能库。...可以让用户更快地更方便地知道你网站有什么样功能或者新增了什么功能。...看一下大体效果 特点 简单:方便易用,没用任何第三方 支持自定义:有很多强大api支持你想要效果 任何元素都可高亮:页面上任何元素都可以高亮显示 支持所有的浏览器(包括IE) 遵循MIT Licensed...开源协议 安装 // yarn 方式 yarn add driver.js // npm 方式 npm install driver.js 引入 import Driver from 'driver.js...是一个非常好用引导用户使用网站功能js库,可以更加人性化、更加方便快捷地融入到你开发网站。

1.3K20

前端JS规范

,eslint: quote-props 原因:因为通常来说我们认为这样主观上会更容易阅读,这样会带来代码高亮上提升,同时也更容易被主流 JS 引擎优化 // bad const bad = {...别忘记要显式命名表达式,而不用管名字是否是从包含变量(通常出现在现代浏览器中或者使用 Babel 编译器时候)中推断。这样会消除错误调用堆栈中任何假设。...bar.css' // good import fooSass from 'foo.scss' import barCss from 'bar.css' 迭代器 建议使用 JS 更高优先级函数代替...,即 var 声明会被提升至该作用域顶部,但是他们赋值并不会。...,我建议统一使用分号,代码更加清晰 关于应不应该使用分号讨论有很多,好 JS 程序员应该清楚场景下是一定要加分号,相信你也是名好开发者。

5.3K10

流行5个前端框架对比

如今出现了大量CSS前端框架,但真正优秀框架只有少数几个。 本文将会比较其中五个最佳框架。每个框架都有自己优点和缺点,以及具体应用领域,你可以根据自己具体项目需求进行选择。...发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是流行HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动Web...浏览器支持: Firefox,Chrome,Safari,IE8 +(您需要IE8Respond.js) 许可证: MIT Bootstrap说明 Bootstrap广泛流行是它优势所在。...核心概念/原则: RWD,移动端优先 框架大小: 326.9 KB(如果包含uikit-icons.min.js与SVG图标相关功能,则为384.4 KB ) 预处理器:少,Sass 响应式布局:是...这可能会鼓励更多开发人员放弃前端框架,从头开始编写他们自己想要布局。

1.5K20

前端努力同学都是如何学习

先说一下我个人对前端职业发展前景看法,希望对那些站在前端学习起点,或者已经在路上,但又有点犹豫和迷茫小伙伴一点点启发和帮助。...但前端发展到现在,要求也越来越高了。比如说天猫消费者前端导购页面,为了提高购买转化率,用户体验做了非常多系统化优化升级,复杂度很高。...先看一下阮一峰老师 JavaScript 入门教程,内容从简单开始讲,循序渐进、由浅入深,并配合了大量代码实例,非常适合初学者。...Vue.js 官方文档,讲真,学习一门新技术时候,官方文档肯定是首选。我推荐策略是以理解为主,难以理解内容可以暂时跳过,因为死磕东西可能一时半会用不上。...https://cn.vuejs.org/v2/guide/index.html Vue.js 技术揭秘,这份开源教程目标是全方位地解析 Vue.js 实现原理,对源码层面有着很深入剖析。

35430

nodejs与前端js区别

很多前端程序员想玩nodejs开发,认为这是前端一股趋势, 但真正能从前端js过渡到nodejs却是凤毛麟角, 而看似和nodejs扯不上关系后端程序员反而玩不亦乐乎。...这于理不合, 写js向来是前端程序员拿手好戏, 但为什么一碰到nodejs, 前端程序员反而不知所措了呢?...因此我认为, 前端开发中使用js和nodejs之间,重点不是js,而是利用js开发程序种类区别。...进行前端开发工作需要掌握技能有html、 css、js以及各种前端框架,把这些技术玩6就可以成为一名合格前端开发工作者 而进行nodejs开发,需要掌握js、web服务器原理、关系数据使用, 如果玩想玩深一点...而前端工程师,通常对于web服务器和关系数据库完全是陌生,而掌握这两项技术可不比掌握js使用来轻松。

4.4K90
领券