<!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. JSP标签和JSTL

    Java的5个标签库:核心(c).格式化(fmt).函数(fn).SQL(sql).XML(x) SQL.XML库不推荐使用 核心标签库(c) //taglib指令 <%@ taglib pre ...

  2. JS禁用浏览器退格键、禁止右键、禁止全选、复制、粘贴

    一.禁用浏览器退格键 摘抄自:https://www.cnblogs.com/wanggd/p/3164536.html 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说 ...

  3. Charles 抓包的简单使用

    1.准备工具: 软件 Charles 手机 随意哪个现代手机 2.基本配置 安装Charles的电脑和手机在同一个局域网下, 点击手机上的和电脑练得同一个局域网的名字进行配置,里面有个代理,选择手动, ...

  4. JAVA 得到数组的长度

    package Code411; //得到数组的长度// 使用 array.length public class CodeArrayLength { public static void main( ...

  5. win7下安装linux（centos6.5）双系统详细小白教程

    在正式介绍linux安装教程之前,先声明一下本人也是刚开始接触linux,所以教程只以成功安装linux为目标,里面的具体步骤我都是参考网上的教程自己操作实现的,至于为什么要这么做就不多做解释,大家想 ...

  6. tp框架设置404页面

    无法加载模板跳向404页面 /thinkphp/library/think/Dispatcher.class.php中176行     // 加载模块的扩展配置文件             load_ ...

  7. Pylon5 SDK搭配OpenCV使用入门

    本文假设已经安装了Basler官网提供的Pylon 目前最新的版本是5.0.5,如果上述链接打不开,请直接所有Basler官网下载,需要注意的是在安装Pylon5时要选择Developer模式,这样才 ...

  8. JS浅谈原始值与引用值操作

    值的操作分为三大类:复制,传递,比较 一:复制 原始值 let a = 10; let b = a; 注释:2018-7-30 17:33:49 1 原始类型的值都是存放在栈内存当中,所以他们的赋值操 ...

  9. Java笔记（二十一） 动态代理

    动态代理 一.静态代理 代理的背后一般至少有一个实际对象,代理的外部功能和实际对象一般是一样的, 用户与代理打交道,不直接接触实际对象.代理存在的价值: 1)节省成本比较高的实际对象创建开销,按需延迟 ...

  10. 给出两个单词word1和word2，写一个函数计算出将word1 转换为word2的最少操作次数。

    问题: 给出两个单词word1和word2,写一个函数计算出将word1 转换为word2的最少操作次数. 你总共三种操作方法: 1.插入一个字符 2.删除一个字符 3.替换一个字符 格式: 输入行输 ...