<!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. POJ 3104 Drying

    最让HSQ学长头疼的就是洗衣服了.洗完之后,每件衣服都有一定单位水分,在不使用烘干器的情况下,每件衣服每分钟自然流失1个单位水分,但如果使用了烘干机则每分钟流失K个单位水分.令人遗憾是HSQ所在的宿舍 ...

  2. C#+EntityFramework编程方式详细之Database First

    Database First “Database First”模式即“数据库优先”,其实Database First 与Model First 很类似,只不过一个是有数据可一个是创建数据库,具体的操作 ...

  3. java 并发 concurrent Executor

    Excutor类 Executor 执行提交的对象Runnable任务. ExecutorService 一个Executor ,提供方法来管理终端和方法,可以产生Future为跟踪一个或多个异步任务 ...

  4. Vue前端利用qrcode生成二维码

    <div id="qrcode" style="width: 560px;height: 560px;background-color: white;"& ...

  5. JavaScript中var、let和const的区别(转载)

    一.前言 在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var . let . c ...

  6. Hadoop 设置任务执行的队列以及优先级

    转自:http://blog.csdn.net/wisgood/article/details/39075883 作业提交到的队列:mapreduce.job.queuename 作业优先级:mapr ...

  7. 微信小程序--家庭记账本开发--03

    组件.标签以及模板的使用 在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件.标签模板的使用有了初步的了解. 1.组件 组件是数据和方法的简单封装,对于微 ...

  8. POJ 1149 PIGS 【最大流】

    <题目链接> 题目大意:有一个养猪场,厂长没有钥匙,这个养猪场一共M个猪圈,N个顾客,每个顾客有一些猪圈的钥匙,每个顾客需要一些猪,问你厂长最多能卖多少猪?这里有个条件是,厂长可以在一个顾 ...

  9. 20172328 暑假作业 之 实现安卓小程序Enjoy-all

    20172328 暑假作业 之 实现安卓小程序Enjoy-all 项目介绍 项目名称: Enjoy - all 项目简介: 本项目基于Java语言和Anroid Studio软件,实现了简单的冒泡.屏 ...

  10. git 入门教程之删除文件

    删除文件 回忆一下文件的常见操作,新增文件,修改文件,删除文件等,新增和修改文件都单独讨论过,现在我们来研究一下如何删除文件. 你可能会说删除文件还不简单啊,直接 rm -rf <file> ...