可视区域图片懒加载

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

随机推荐

pwnable.kr blackjack之write up
首先我们按提示找到源代码,看这一段: int betting() //Asks user amount to bet { printf("\n\nEnter Bet: $"); s ...
c#导出word文档
为方便下次遇到不知道去哪找先把它存放在这里,以下是保存导出word主要类方法 public class BiultReportForm { /// <summary>word 应用对象 & ...
xtu DP Training C.炮兵阵地
炮兵阵地 Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 11856 ...
JavaScript变量声明提升
JavaScript代码在被解析引擎执行前,会被“编译”把变量声明等放在合适的作用域中,如果不了解这一点,会让人产生很多疑惑. 文章:详解js变量声明提升
HDU4462稻草人
l问题描述:有一块N*N的玉米田(N<=50),给定K个(X,Y)的坐标位置(K<=10)和相应的覆盖范围,请问,至少在这K个位置中选择几个放置稻草人,能保证玉米田全被覆盖? #i ...
MT6755 使用R63350 IC 出现唤醒概率性闪白，并导致ESD FAIL
现象描述. 手机自动灭屏后按power键或home 键点亮屏幕,概率性上方有白色的一道,还会闪两三下屏.使用的LCM IC是:r63350, (FHD VDO)屏,附件为mtklog看看是什么原因? ...
MS SQLServer Update语法和实例
最常用的update语法是: 1 2 UPDATE TABLE_NAME SET column_name1 = VALUE WHRER column_name2 = VALUE 如果我的更新值Valu ...
HDU 2629 Identity Card
简单题给出身份证号判断住址和出生年月熟练字符串的操作主要是string::substr(s, l)//s:起始位置 l长度 #include <iostream> #includ ...
使用windows操作EXCEL如何关闭EXCEL进程
经常项目上有导入excel的需求,其实导入一个固定格式的excel数据非常容易,但是,发现一个问题就是,导入excel后,用户在打开excel时,必须要打开2次才能打开excel,这让人很不爽:开始查 ...
《effective C++》：条款36——绝不重新定义继承而来的非虚函数
(1)当派生类中重写了基类的非虚函数时,这个时候这个函数发生的是静态绑定下面中的代码中: 定义一个基类B,基类定义了函数fcm,fcm是非虚的函数. 定义一个派生类D,派生类重新定义了fcm. 当用 ...

js可视区域图片懒加载

可视区域图片懒加载

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

随机推荐

热门专题