可视区域图片懒加载

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

随机推荐

杭电 1596 find the safest road （最小路径变形求最大安全度）
Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条从u 到 v 的 ...
.NET Core 文件的上传与下载
1.前言文件导入导出是简单且常用的功能,以下示例实现了文件上传与下载的几种方法,如有不妥的地方,欢迎指正.小白一枚,在往目标前进. 2.1.文件上传 -- 纯文件 <form ac ...
准确率(Precision),召回率(Recall)以及综合评价指标(F1-Measure)
准确率和召回率是数据挖掘中预测,互联网中得搜索引擎等经常涉及的两个概念和指标. 准确率:又称“精度”,“正确率” 召回率:又称“查全率” 以检索为例,可以把搜索情况用下图表示: 相关不相关检索 ...
_063_Android_Android内存泄露
深入内存泄露 Android应用的内存泄露,其实就是java虚拟机的堆内存泄漏. 当然,当应用有ndk,jni时,没有及时free,本地堆也会出现内存泄漏. 本文只是针对JVM内存泄漏应用,进行阐述分 ...
Heredoc和Nowdoc
就象heredoc结构类似于双引号字符串,Nowdoc结构是类似于单引号字符串的.Nowdoc结构很象heredoc结构,但是 nowdoc不进行解析操作 . 这种结构很适合用在不需要进行转义的PHP ...
MySQL Slow Log慢日志分析【转】
如果你的MySQL出现了性能问题,第一个需要“诊断”的就是slow log(慢日志)了. slow log文件很小,使用more less等命令就足够了.如果slow log很大怎么办?这里介绍MyS ...
rabbitmq management Login Failed
默认用户guest 只允许localhost登录. so... 我们自己建立用户 1. 用户管理用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rab ...
python学习之-- redis模块基本介绍
数据缓存系统: 1:mongodb:是直接持久化,直接存储于硬盘的缓存系统 2:redis: 半持久化,存储于内存和硬盘 3:memcache:数据只能存储在内存里的缓存系统关于memcache 学习 ...
进入一个jsp直接跳到另一个jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
动态规划：HDU 1114 Piggy-Bank
Problem Description Before ACM can do anything, a budget must be prepared and the necessary financia ...

js可视区域图片懒加载

可视区域图片懒加载

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

随机推荐

热门专题