2.原生js实现图片懒加载
网上查了很多图片懒加载的内容, 但基本上都是jQuery实现的, 没有说清楚其原理, 所以研究了一下
多的不说, 上代码, 看不明白的建议看下我的上一篇文章<1. 图解浏览器和用户设备的宽高等属性>
HTML部分(图片地址自己随意)
<div>
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
<img data-src="1.jpg" src="0.gif" alt="">
</div>
JS部分
/*
思路 1.先将图片地址存在"data-src"中
2.图片出现在页面中就将"src"的地址改变
重点 判断图片是否出现在页面中
1.图片距离页面顶部的高度 + 屏幕高度
2.页面距离顶部被卷起来的高度
*/
//可操作部分(建议使用前测试)
var m = 500; //值越大顶部加载的越多
var n = 0; //值越大加载的越多 //选定img元素
var imgs = document.getElementsByTagName("img");
//判断浏览器的高度
var win_h = window.innerHeight||document.documentElement.clientHeight;
//更换图片
function replace(num){
//不能直接将img的"src"等于"data-src",所以先获取"data-src"的值,然后再添加给"src"
imgs[num].setAttribute("src", imgs[num].getAttribute("data-src"));
} //页面滚动时判断滚动到位置(出现在视图窗口),进行加载
window.onscroll = function(){
//页面被卷起来的部分的高度
var scroll_top = window.pageYOffset;
//图片距离页面顶部的高度
for (var i = 0; i < imgs.length; i++) {
var c = imgs[i].offsetTop;
//当图片刚好在可视窗口之内时,替换内容
if (c > (scroll_top - m) && c < (scroll_top + win_h - n)) {
replace(i);
}
}
}
//开始页面就要加载一部分图片
window.onscroll();
虽然比较啰嗦, 但是内容详细. 希望能帮到大家
最终效果如下:
2.原生js实现图片懒加载的更多相关文章
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 原生js实现图片懒加载+加入节流
这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现图片懒加载
大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- js实现图片懒加载原理
原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...
随机推荐
- Java 数学操作类
数学操作类 Math类 数学计算操作类 类属性值 Math.E ^ Math.PI 圆周率 类方法 Math类中,一切方法都是 static 型,因为Math类中没有普通属性. round() 方法 ...
- (入门SpringBoot)SpringBoot项目事务(三)
Spring声明式事务的使用:由@Transactional进行标注,可以使用在类和方法上.当标注在类上,类下面所有公共非静态的方法都将启用事务功能.接下来,运行事务注解标注的方法,Spring的事务 ...
- 18.Llinux-触摸屏驱动(详解)【转】
转自:https://www.cnblogs.com/lifexy/p/7628889.html 本节的触摸屏驱动也是使用之前的输入子系统 1.先来回忆之前第12节分析的输入子系统 其中输入子系统层次 ...
- KETTLE入门教程-单表读取
kettle初探 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程 ...
- Html学习之九(CSS选择器的使用--位置选择器)
位置选择器: 一..:first-child选择器 <!doctype html> <html> <head> <meta charset="utf ...
- centos7.6离线安装mysql5.7(附下载链接)
本来打算直接用原生yum源安装,但是跨国访问网络太慢,只好采用离线安装的方式,原理就是把所需的rpm下载下来再上传服务器安装. 1.rpm文件下载地址: 目录: http://repo.mysql.c ...
- C++ 回调函数 Callback 机制例程
#include <iostream> #include <thread> #include <mutex> #include <Windows.h> ...
- 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...
- linux 基本命令 1
Linux基本命令(一) 目标 熟练使用 Linux常用的命令 ls 查看文件 clear 清空 cd pwd mkdir touch rm cp mv tree chmod find gr ...
- hadoop自带RPC的使用 代码demo
引入的三方包 <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop- ...