可视区域图片懒加载

实现原理，页面滚动时获取需要懒加载的图片，判断此图片是否在可视区域内，是则设置图片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带来的负荷.所以 ...

随机推荐

PHP中的预定义常量、类常量和魔术常量的区别
PHP 向它运行的任何脚本提供了大量的预定义常量.不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 对于一些基本的常量是这些常量在 ...
mysql单实例多库与多实例单库
一.单实例多库: 一个mysql实例,创建多个数据目录. 规划: 实例路径:/usr/local/mysql 数据目录路径: (1)/usr/local/mysql/data (2)/usr/loca ...
关于react-native引入第三方库，运行react-native link xxxxx后项目无法运行
最新版本的react-native中,官方表示将要移除 AsyncStorage,推荐使用@react-native-community/async-storage,好吧官方经常这么干按照官方提 ...
JS获取所有LI中第三个<SPAN>
Leetcode 304.二维区域和检索-矩阵不可变
二维区域和检索 - 矩阵不可变给定一个二维矩阵,计算其子矩形范围内元素的总和,该子矩阵的左上角为 (row1, col1) ,右下角为 (row2, col2). 上图子矩阵左上角 (row1, c ...
FZU2102Solve equation
Problem 2102 Solve equation Accept: 881 Submit: 2065 Time Limit: 1000 mSec Memory Limit : 3276 ...
hdu 3879 最大权闭合图（裸题）
/* 裸的最大权闭合图解:参见胡波涛的<最小割模型在信息学竞赛中的应用 #include<stdio.h> #include<string.h> #include< ...
zookeeper学习0
参考文献: 5分钟让你了解 ZooKeeper 的功能和原理 Zookeeper专题——1.分布式事务(a概述) Zookeeper专题——2.分布式锁-基于Zookeeper的分布式锁
HTTP请求示例
HTTP请求格式当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,HTTP请求信息由3部分组成: l 请求方法URI协议/版本 l 请求头(Request Hea ...
poj 1236+hdu2767 有向图缩点+看度数（tarjan）
1236题意:一个有向图,1,求至少从几个点出发可以遍历该图,2:,求至少添加多少边,使强连通.而,HDU的只有后面一问. 解;先缩点,第一问只需找所有入度为0的点即可.,第2问,max(入度为0的点 ...

js可视区域图片懒加载

可视区域图片懒加载

js可视区域图片懒加载的更多相关文章

随机推荐

热门专题