可视区域图片懒加载

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

随机推荐

nginx+tomcat实现简单的负载均衡
host1:10.0.0.10(部署nginx和tomcat) host2:10.0.0.11(部署tomcat) 平台环境(2主机一样) [root@smp ~]# uname -r3.10.0-8 ...
【练习】reserving.kr 之imageprc write up
补充:c++ builder 与 windows API经典范例 #include <vcl.h> #pragma hdrstop #include "Unit1.h" ...
【转】亿级Web系统搭建——单机到分布式集群
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...
自定义UDF函数应用异常
自定义UDF函数应用异常版权声明:本文为yunshuxueyuan原创文章.如需转载请标明出处: http://www.cnblogs.com/sxt-zkys/QQ技术交流群:299142667 ...
python多线程--优先级队列（Queue）
Python的Queue模块中提供了同步的.线程安全的队列类,包括FIFO(先入先出)队列Queue,LIFO(后入先出)队列LifoQueue,和优先级队列PriorityQueue.这些队列都实现 ...
在mac下安装matplotlib,xlrd
brew install freetype brew install libpng sudo easy_install pip#图形显示模块 sudo pip install matplotlib 输 ...
poj3207：Ikki's Story IV-Panda's Trick【2-sat tarjan】
题目大意:圆盘上顺次安放0, 1, 2, …, n – 1的点,每次给出两个点需要连边,可以选择在圆盘的正面连边或在圆盘的反面连边,问是否存在一种方案使得所有连线不相交? 思路:本问题可以等价成:圆盘 ...
[NOIP2002] 普及组
产生数预处理出一个数能变成多少种数,然后遍历原串的每一位,累乘方案数即可. 需要用到高精度. /*By SilverN*/ #include<iostream> #include< ...
[NOIP1999] 提高组洛谷P1014 Cantor表
题目描述现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … ...
CF830B：Cards Sorting
对叠放着的n张牌,第i张牌写有数字Ai,进行操作:将牌堆顶的牌取出,若是当前牌堆最小值就扔掉,否则放到牌堆底,求牌堆空时操作次数. 怎么看怎么像约瑟夫..不过约瑟夫DP我不太熟,于是就yy了一下 “当 ...

js可视区域图片懒加载

可视区域图片懒加载

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

随机推荐

热门专题