js可视区域图片懒加载
可视区域图片懒加载
实现原理，页面滚动时获取需要懒加载的图片，判断此图片是否在可视区域内，是则设置图片data-src地址为src地址，加载图片。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>jquery可视区域图片懒加载</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
} img {
width: 100%;
display: block;
} .content {
width: 100%;
} </style>
</head> <body> <div class="content">
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
</div>
<div class="m1">
<img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
</div>
</div> <script type="text/javascript">
//调用
visibleImgLazyload();
//触发滚动 防止第一屏不加载
$("body,html").scrollTop(1);
/**
* 可视区域 img 加载
*/
function visibleImgLazyload() {
//当前窗口高度
var winHeight = $(window).height();
//整个文档高度
var bodyHeight = $(document).height();
//如果图片不满屏，直接加载
if(bodyHeight <= winHeight) {
$(".J-lazd").each(function() {
var $this = $(this);
if($this.attr("data-url") != $this.attr("src")) {
//如果为空，src设置为data-src
if($this.attr("data-src")) {
$this.attr("src", $this.attr("data-src"));
} else {
$this.attr("data-src", $this.attr("src"));
}
}
});
} else {
//容差值 预加载上下100像素内的图片
var phase = 100;
$(document).on("scroll", function(e) {
$(".J-lazd").each(function() {
var $this = $(this);
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
//屏幕顶部距离最顶部的高度 减去图片高度，上拉时也会点到图片就加载
var thisTop = parseInt($(window).scrollTop()) - parseInt($this.height());
var imgTop = parseInt($this.offset().top);
if(imgTop >= thisTop - phase && imgTop <= thisButtomTop + phase && $this.attr("data-url") != $this.attr("src")) {
//如果为空，src设置为data-src
if($this.attr("data-src")) {
$this.attr("src", $this.attr("data-src"));
} else {
$this.attr("data-src", $this.attr("src"));
}
}
});
});
}
}
</script> </body> </html>
js可视区域图片懒加载的更多相关文章
- 原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
随机推荐
- 关于构造函数什么值传递给他的实例，只有this和prototype
var a= function (){var bb = 12; this.aa ="xxx"}; a.aa="www"; a.prototype.cc=&quo ...
- XTU 二分图和网络流 练习题 B. Uncle Tom's Inherited Land*
B. Uncle Tom's Inherited Land* Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I ...
- zoj 2818 Root of the Problem
Root of the Problem Time Limit: 2 Seconds Memory Limit: 65536 KB Given positive integers B and ...
- php基础 数组 遍历
//参数默认值// function abc($a,$b,$c=0){// echo $a,$b,$c;// }// abc(1,3); //可变参数//function def(){// $arr= ...
- Java实战及解析 — Maven快速入门
五分钟快速入门 mvn --version mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -Darche ...
- 什么是Istio
本文主要是对Istio Prelim 1.0(https://preliminary.istio.io/docs/)的翻译 Istio:一种开放式平台,用于连接,管理和保护微服务. Istio提供了一 ...
- 【HDOJ6343】Graph Theory Homework（贪心）
题意: 给定n个点,每个点有权值a[i],从A走到B的花费是下取整sqrt(a[i]-a[j]),求从1号点走到n号点的最小花费 1<=n,a[i]<=1e5 思路: #include&l ...
- BZOJ2097: [Usaco2010 Dec]Exercise 奶牛健美操
n<=100000的树,砍S<n条边,求砍完后S+1棵树的最大直径的最小值. 树的直径要小小哒,那考虑一棵子树的情况吧!一棵子树的直径,就是子树根节点各儿子的最大深度+次大深度.就下面这样 ...
- MYSQL常见运算符和函数【重要】
字符函数 (1)CONCAT():字符连接 SELECT CONCAT(‘IMOOC’,’-‘,’MySQL’);//IMOOC-MySQL SELECT CONCAT (first_name,las ...
- Git学习之常见错误 git push 失败
Git学习之常见错误 git push 失败 问题描述: git push Counting objects: , done. Delta compression using up to thread ...