首页
学习
活动
专区
工具
TVP
发布

原生 JS 实现最简单图片懒加载

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

2.8K20

简单方式使用原生 js 发送 http 请求

使用场景 1、检查接口可用性 主要用于在没有引入 jQuery 等工具页面上需要验证一些 api 能否调得通时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题场景下,特别好用。...2、验证接口用于爬虫 另外,因为在浏览器调试界面发起请求跟页面自身 js 发起请求是一样,所以可以不用关心登录状态等上下文环境问题。...这在写爬虫时候特别实用——抓到一个链接之后,直接在浏览器上进行验证,先调用一下试试好不好用再说。...3、减少依赖 因为可以直接使用原生 js,因此无需添加 jQuery、axios 等第三方工具就可以发送 http 就请求,可以减少应用体积。

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

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

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

5K30

Python 绘制科赫雪花简单实现

简单跑了一下程序,结果如下,这个画图速度已经是最快了 ??? : 源代码 ? 源码如下,这是最简单实现,大佬勿喷 ?。...雪花个数随机[2,10]之间 雪花大小随机 ''' # 递归画科赫曲线,控制阶数和角度 def koch(size, n): if n == 0: turtle.fd(size...angle in [0, 60, -120, 60]: turtle.left(angle) koch(size / 3, n - 1) # 控制雪花个数...def control_num(n): # 一个随机函数控制随机位置和大小,参数为雪花个数 for i in range(n): # 隐藏画笔 turtle.hideturtle...; 有的雪花会出界,可以简单通过控制边界大小和雪花随机出现位置避免,也可以在循环时候多加一条判断,如果出界就 continue; 总结一下,练习了函数运用以及一些算法头脑风暴,复习了海龟绘图以及

1.3K30

简单说 JavaScript实现雪花飘落效果

说明 这次实现雪花飘落效果很简单,主要是为了练习练习JavaScript中定时器,setTimeout 和 setInterval。 效果图 ?...上面是实现思路,下面写出具体代码,下面的代码是JS原生代码,最后会附上JQuery实现代码,思路都一样。 <!...,会在下一次Event Loop执行,所以第二个定时器作用是为了让生成雪花先拼接到页面中渲染出来后,再修改他样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面...简单说,意思就是用了这个定时器,能把两次修改样式代码分开执行,可以先把第一次修改样式渲染后,在进行第二次修改,雪花就会动了。 JQuery版 <!...} <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.<em>js</em>

2K50

input获取焦点 原生js_原生jsinput事件

大家好,又见面了,我是你们朋友全栈君。...1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发前提是已经获取了焦点再失去焦点时候才会触发该事件,用于判断标签为空。...4.onkeydown 按下按键时事件触发, 5.onkeyup 当按键抬起时候触发事件,在该事件触发之前一定触发了onkeydown事件–相当于一个按键,两个事件,没怎么用过 6.onclick...主要是用于 input type=button,input作为一个按钮使用时鼠标点击事件 7.onselect 当input里内容文本被选中后执行,只要选择了就会触发,不是全部选中 8.oninput...当inputvalue值发生变化时就会触发,(与onchange区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input属性里,例如: 1 , 可以通过js给input

24.5K60

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据方式,不需要刷新整个页面: ajax技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax封装与使用 一.原生Ajax代码封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了phppdo数据库操作,和jsajax,真麻烦,希望jqueryajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/jsajaxGET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了phppdo数据库操作,和jsajax,真麻烦

15K40

使用原生js做一个简单定时访问页面

2020年3月某一个周末,我在无聊之下想通过js实现刷浏览量功能,它优点是不需要引入任何东西,只需要建一个html页面,将我们js代码加进去就可以执行。...(记得允许你浏览器打开其他页面) 开始思路,通过jsfor循环一直访问文章地址,链接方式使用window.open("地址")方式 $(function (){ for (var...location.close(); 这个是关闭标签页功能,但是测试后我们是关闭了我们js页面,我们实际要关闭是open页面,再修改一下,在我们使用open时候用var定义接受一下对象以便于关闭打开标签页...,这样每次定时执行会先关闭之前页面,再执行我们定义好数组地址。...null){ window.open(ad[i]); } } } 但是如果要每次要打开100个地址还是对浏览器有影响,所以我们多定义几个定时js

1.1K80

原生JS | 数据类型检测,并没你想象那么简单

,面试一家大型知名互联网公司时候,面试官问了一个看上去“超级”基础问题:如何进行数据类型检测啊?...码匠好友:敏捷开发时候通常使用jQuery函数,原生的话,会使用typeof和instanceof结合实现。 面试官:typeof不足之处在于什么?...true,而Object检测返回false constructor局限性 对于自己创建构造函数,constructor局限性会比较大(当然这里不是我们主要要讨论东西),constructor...但是,对于系统各类构造函数,还是可以正常使用,毕竟我们平日里并不会去修改系统默认对象constructor指向。...如果在这方面积累不太够小伙伴,建议可以先掌握这些知识点,然后后期随着自己知识深入逐渐理解实现原理。

93750

原生JS知识系统梳理

笔者最近在对原生JS知识做系统梳理,因为我觉得JS作为前端工程师根本技术,学再多遍都不为过。...这导致JSNumber无法精确表示非常大整数,它会将非常大整数四舍五入,确切地说,JSNumber类型只能安全地表示-9007199254740991(-(2^53-1))和9007199254740991...首先要明白作用域链概念,其实很简单,在ES5中只存在两种作用域————全局作用域和函数作用域, 当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量标示符或者不在父作用域中...就这么简单一件事情! 闭包产生本质就是,当前环境中存在指向父级作用域引用。...明明我只改变了s1play属性,为什么s2也跟着变了呢?很简单,因为两个实例使用是同一个原型对象。 那么还有更好方式么?

1.8K53

原生JS | 作用域

局部变量 常见局部变量有以下两种: ● 在函数内声明变量(使用var); ● 函数参数(形参)。 局部变量存在于函数体内,它们值只能在函数体内访问和修改。...变量查找方式 & 作用域链 变量查找方式 当局部作用域当中出现属性时候,首先查找当前作用域当中是否具有存储空间,如果有,直接采用;如果没有,向其父级查找,如果父级没有,继续向上,直到查找到window...也就是“案例1”代码中 user与window.user是等价。...,不难看出,全局user变量和函数内部变量,并不是同一个变量。...更多案例练习 在我们(HTML5学堂-码匠)开发微信小程序“决胜前端”当中,我们最新更新了关于作用域一些练习题,感兴趣可以进入微信小程序。

4.6K50
领券