<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jquery 实现懒加载</title>

    <style>

        ul,

        li {

            list-style: none;

        }

        .container {

            width: 800px;

            margin: 0 auto;

        }

        .container li {

            float: left;

            margin: 10px 10px;

        }

        .container li img {

            width: 340px;

            height: 260px;

        }

    </style>

</head>

<body>

    <ul class="container">

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />

            </a>

        </li>

    </ul>

</body>

 //引入jquery

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<script>

    //监听文档是否有触发滚动事件

    $(document).on('scroll', function () {

        $(".container img").each(function () {

            // 判断是否是在可视区域内 并且 判断lodingimg($(this))是否有加载过 如果加载过就不执行此步骤 要不就会再次执行

            if (showhide($(this)) && !lodingimg($(this))) {

                voluation($(this))  //把自定义的 data-src 赋值给img中的src属性

            }

        })

    })

    // 判断图片是否需要加的必要条件

    function showhide(img) {

        var scrolltop = $(document).scrollTop()              //获取浏览器卷去的部分

        var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域

        var offsettop = img.offset().top;                    //获取图片距离顶部的距离

        var imgheight = img.height()                         //获取图片元素的高度

        // 从上往下加载图片 判断 如果图片的距离 > 浏览器卷去的部分 && 图片距离 < 卷去的部分 + 浏览器的可视区域

        // 从下往上加载图片 或者 图片距离 < 卷去的部分 && 图片距离 > 卷去的高度 - 图片自身的高度（边界条件）

        if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {

            return true

        }

        return false

    }

    // 把自定义的 data-src 赋值给img中的src属性

    function voluation(img) {

        return img.attr('src', img.attr('data-src'))

    }

    // 用于判断是否有加载

    function lodingimg(img) {

        return img.attr('data-src') === img.attr('src')

    }

    // 首次渲染 如果不提前执行一次页面图片显示空白 必须滚动才能够加载

    $(".container img").each(function () {

        onecarry($(this))

    })

    // 首次执行此函数

    function onecarry(img) {

        var scrolltop = $(document).scrollTop()

        var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域

        var offsettop = img.offset().top;

        var imgheight = img.height()

        if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {

            voluation(img)

        }

    }

</script>

</html>

jQuery实现图片懒加载的更多相关文章

  1. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  2. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  3. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  4. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  5. jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片，就显示默认的图片

    参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s    下面是没有 ...

  6. 基于jquery的图片懒加载js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  7. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  8. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  9. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. 【听大佬rqy分享有感】

    rqy,一个神奇的名字,一个神奇的物种. 初三自学高等数学,无师自通:获得了大大小小的oi奖项:是也一直是山东省信息学的“红太阳”:今天听了他的分享,真的很有帮助. 1.  不必太较真:遇到不会的高数 ...

  2. laravel5.4 打印输出 sql 语句

    直接打印 sql 语句 DB::connection('test_link')->enableQueryLog(); //执行代码 $log = DB::connection('test_lin ...

  3. JdbcTemplate中queryForObject方法返回空结果或不正确结果数量的解决方法

    在使用Spirng提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常: org.springframework.dao.EmptyResultD ...

  4. Python-选择器Xpath,Css,Re

    正则表达式(特殊字符) ^ 开头 '^b.*'----以b开头的任意字符 $ 结尾 '^b.*3$'----以b开头,3结尾的任意字符 * 任意长度(次数),≥0 ? 非贪婪模式,非贪婪模式尽可能少的 ...

  5. js 校验 btc eth 地址

    NPM 安装 npm install wallet-address-validator Browser <script src="wallet-address-validator.mi ...

  6. ionic3 安卓硬件返回

    platform.ready().then(() => { this.platform.registerBackButtonAction(() => { let activePortal ...

  7. 进入js

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  8. laravel 汇总数据

    public function userInfluenceCollect(Request $request) { $types = ['logins', "checkins", & ...

  9. spark Transformations算子

    在java中,RDD分为javaRDDs和javaPairRDDs.下面分两大类来进行. 都必须要进行的一步. SparkConf conf = new SparkConf().setMaster(& ...

  10. IntelliJ IDEA 中的Java程序目录结构

    --src 应用程序源代码与测试代码的根目录 --main 应用程序代码的源目录 --java 源代码 --resources 项目用到的资源文件 --test 测试程序代码的源目录 --java 测 ...