<!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. k64 datasheet学习笔记39---Programmable Delay Block (PDB)

    0.前言 TODO 1.特性 TODO 4. 功能描述 4.1 PDB pre-trigger and trigger outputs PDB包含一个计数器,它的输出可以跟几个不同的数字值比较.如果P ...

  2. nginx+tomcat：动静分离+https

    nginx server { listen 80; server_name 192.168.0.103; # http访问重写为https rewrite ^ https:/$http_host$re ...

  3. 使用Java方式连接HDFS

    IDEA中新建Maven工程,添加POM依赖, 在IDE的提示中, 点击 Import Changes 等待自动下载完成相关的依赖包. <?xml version="1.0" ...

  4. 列表生成式，迭代器&生成器

    python3中range(10)就 是迭代器 列表生成式 #列表生成式 a=[0,1,2,3,4,5] b=[] for index,i in enumerate(a): a[index]+1 pr ...

  5. Git一些简单但非常重要并常用的操作命令

    1.将本地与github进行关联配置 生成公钥 ssh-keygen -t rsa -C "jiasheng.mei@hpe.com" 将公钥拷贝到github中 在公钥同文件夹( ...

  6. vs2019离线安装包下载

    https://docs.microsoft.com/en-us/visualstudio/install/use-command-line-parameters-to-install-visual- ...

  7. 修改pip安装源加快python模块安装

    用pip安装依赖包时默认访问https://pypi.python.org/simple/,但是经常出现不稳定以及访问速度非常慢的情况,国内厂商提供的pipy镜像目前可用的有: http://pypi ...

  8. Round#534 div.2-B Game with string

    唔,第一次参加,掉了好多分. http://codeforces.com/contest/1104/problem/B 不用考虑太多,string真的好厉害. #include<stdio.h& ...

  9. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  10. [数据结构] 快速排序C语言程序

    //由大到小//快速排序(待排序数组,左侧起点,右侧起点) void quickSort(int *array, int l, int r) { if ( l >= r) return; int ...