精选文章 封装的图片懒加载js

封装的图片懒加载js

作者:夜惊如水 时间: 2019-11-04 02:17:27
夜惊如水 2019-11-04 02:17:27
function filterDom(selector) {
    return Array.from(document.querySelectorAll(selector));
}
//事件观察者
var observer = new IntersectionObserver(observerCall,{
    root: null,
    rootMargin : '0px 0px 20px 0px',
    threshold:[0, 1]
});
function observerCall(changes) {
    changes.forEach(function(change) {
        setTimeout(function(){
            if(change.intersectionRatio > 0){
                var container = change.target;
                var dataSrc = container.getAttribute('data-src');
                container.setAttribute('src', dataSrc)
                observer.unobserve(container);
            }

        }, 100);
    });
}
//过滤元素
filterDom('.lazy-loaded').forEach(function (item) {
    observer.observe(item);
});

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:字节跳动面试题.小兔棋盘 「卡特兰数、动态规划」

下一篇:Vue中使用Echart图表插件之圆环套圈

您可能感兴趣

  • js与jquery的区别

    我们来简单看一下jquery与js的概念。 js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。 jquery是一个快速、简洁的JavaScript框架,极大的简化了javascript编程。 一、本质上的区别 js是脚本语言有自己的变量和方法多用于表单验证和与用户的交互性以及动态效果功能强大但是有时候使用起来很麻烦 所以就出了 j...

  • GitHub 上值得收藏的 100 个精选前端项目!

    点击上方“逆锋起笔”,公众号回复 PDF 领取大佬们推荐的学习资料 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有。 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些前端大神的作品,也有很多令人惊艳的前端效...

  • 22 款神经网络的设计和可视化工具

    前言 深度学习领域,最常见的就是各种网络模型,那么在写论文或者文章,介绍网络模型的时候,最好的办法当然就是展示代码画图,今天介绍的 Github 项目,就是整理了 22 个设计和可视化网络结构的工具,其地址如下: https://github.com/ashishpatel26/Tools-to-Design-or-Visualize-Architecture-of-Neural-Netwo...

  • 2020年iOS面试反思总结

    Object-C系列面试题总结 基础题: 1.Objective-C的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么不要在category中重写一个类原有的方法? 答: Objective-c的类不可以有多继承,OC里面都是单继承,多继承可以用protocol委托代理来模拟实现 可以实现多个接口,可以通过实现多个接口完成OC的多重继承...

  • 前端性能优化常用方案

    =前端开发性能优化方案= 减少HTTP请求次数和请求大小 代码优化 ->有利于SEO ->有利于扩展维护 ->有利于减少性能消耗 [JS代码优化的108条建议] [雅虎CSS优化的36条建议] ...

  • JavaScript之移动端网页特效

    1. 触屏事件 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 1.1 触摸事件对象 TouchEvent 三个常见的触摸事件对象 触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches 正在触摸当前DOM元素上的手指...

  • 原生JS和jQuery的对比使用

    1.入口函数 js: window.onload = function(){js代码} 实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。 jq: $(function(){})   $(document).ready(function(){}) 在html所有的标签都加在之后就会去执行,...

  • 2020年PHP面试题附答案(实战经验)

      出于一些原因近期做了一次工作变动,在职交接近一个半月时间大概面试了十五家公司,并且得到了自己比较满意的offer,最后基本上无缝衔接了新工作。总体来说,虽然准备的很充分,但面试期间还是暴露了许多问题,所以做下总结,供大家和自己以后参考,主要分四部分讲述: 简历方面,格式内容包括七个板块,个人简介,求职意向,工作经历,项目经历,技能描述,学历背景,自我评价。如果自己或公司没有其他特殊要求,...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。