jQuery实现图片懒加载

<!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>

原文地址:https://www.cnblogs.com/a-pupil/p/10704532.html

时间: 2024-10-15 03:47:33

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

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

原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量. 所以,淘

jQuery.imgLazyLoad图片懒加载组件

一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad:使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址. 二.应用实例demo /** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(

jQuery lazyload 图片懒加载实现

现在网站页面内容越来越丰富,图片内容也越来越多,而图片过多会导致网页文件过大,从而引发加载缓慢的问题,而图片懒加载就是为解决这一问题而生. 首先我们来讲Jquery的懒加载控件  jQuery lazyload.JS jQuery lazyload.JS 地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接复制源码到本地 jQuery lazyload.JS是用 jQuer

jQuery插件图片懒加载lazyload

来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可 见)中的图片是不加载的,这样势必会引起速度上质的提升. 实现原理: 当图片滚动到可视区时将图片加载进来. 图片不在可视区判断: (一):图片距离页面顶端的高度 大于 窗口可视区的高度+window滚动条的scrollTop. (二

基于jquery的图片懒加载js

function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).fin

图片懒加载lazyload

图片懒加载:jquery && jquery-lazyload 图片懒加载是一种前端性能优化方案:随着视图区的滚动,加载剩下的图片,这样当滚动条没有滚动到下面的时候,图片不加载,减少资源浪费 原本:<img src="images/img1.jpg" > 懒加载:<img class="lazy" data-original="images/img1.jpg" > <script type="

前端插件实现图片懒加载

一.echo.js: 我们在开发页面的时候肯定会遇到图片比较多的时候,虽然我们可能有图片分布式的服务器,但是在客户端还是会有很大的性能开销.为了用户体验,特别是对首屏加载速度要求很高的,通常我们会考虑图片延时加载,lazyloading这款插件已经能很好地实现这一功能,可是是基于jQuery,对于移动端可能不太实用.一个非常简单实用叫echo的插件,3k左右特别适合移动端使用.步骤如下: 1.在页面中需要引入echo.css和echo.min.js 2.对需要进行延迟加载的图片采用如下写法: <

jquery 图片懒加载

jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=function(b){var c={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:window,skip_invisible:!0};b&&(null!==b.failurelim

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"