可视区域图片懒加载

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

随机推荐

xenserver tools 安装
mkdir -p /mnt/xtools mount /dev/cdrom /mnt/xtools cd /mnt/xtools/Linux/ ./install.sh -n init 6
周期性任务计划: Crontab
文中部分内容摘自骏马金龙的博客,查看可点击 1. crontab简述 crontab命令用于周期性的执行任务,想要执行这个命令,需要首先启动crond(守护进程)服务才行 crontab是配置管理cr ...
mysql 建表规范
常用字段 CREATE TABLE `che`.`<table_name>` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '索引id', ...
python_time和datetime模块
time和datatime模块时间相关的操作,时间有三种表示方式: 时间戳 1970年1月1日之后的秒,即:time.time() 格式化的字符串 2019-1-1 ...
404 Not Found 由来
404 NOT FOUND! 抱歉,沒有找到您需要的文章!! 什么是 404 Not Found 404页面是网站必备的一个页面,它承载着用户体验与SEO优化的重任.404页面通常为用户访问了网站上不 ...
Leetcode 301.删除无效的括号
删除无效的括号删除最小数量的无效括号,使得输入的字符串有效,返回所有可能的结果. 说明: 输入可能包含了除 ( 和 ) 以外的字符. 示例 1: 输入: "()())()" 输出 ...
Computers（线性DP）
描述 Everybody is fond of computers, but buying a new one is always a money challenge. Fortunately, th ...
CSU1350 To Add which?
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1350 这题目因为每一个数都跟相邻的数有关,所以可以从左到右和从右到左一次扫一遍即可代 ...
PHP中的魔术方法【转载】
__construct, __destruct , __call, __callStatic,__get, __set, __isset, __unset , __sleep, __wakeup, _ ...
Python高级进阶(一)Python框架之Django入门
传说中的Django Django由来 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下 ...

js可视区域图片懒加载

可视区域图片懒加载

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

随机推荐

热门专题