jQuery图片延迟加载

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。效果展示 http://hovertree.com/t

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。

效果展示 http://hovertree.com/texiao/jqimg/7/

请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便。在本文后面附有源码下载。

用到的加载中的图片:
jQuery图片延迟加载

jQuery图片延迟加载

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" />
    <meta name="description" content="何问起">
    <meta name="keywords" content="何问起">
    <link href="" rel="stylesheet">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .hovertreebox {
            padding-top: 800px;
        }

        .img_hovertreebox {
            float: left;
            width: 33%;
            text-align: center;
            margin-bottom: 100px;
        }
        .hovertreeinfo{text-align:center;}
        .hovertreeinfo a{color:blue;}
    </style>
    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(window).scroll(function(event) {
          var ah=$(window).scrollTop();
          var ch=$(window).height()
          $('.img_hovertreebox').each(function(){
            var bh=$(this).offset().top;
            if(ch+ah-200>bh){
                var a=$(this).find('img').attr("load_src");
                 $(this).find('img').attr("src",a);
            }
          })
        });
    })
    </script>
</head>
<body>
    <div class="hovertreeinfo"><h1>jQuery鼠标滚动页面图片延迟加载</h1>
    请向下滚动页面。注意图片的变化。
        <a href="http://hovertree.com">何问起</a>
        <a href="http://hovertree.com/menu/texiao/">网页特效</a>
        <a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代码说明</a>
    </div>
    <div class="hovertreebox">
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/086c536d-0bf6-42da-be41-8aa3799ff0df-1639930842476.jpg">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">
        </div>
        <div class="img_hovertreebox">
            <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/40b57bf0-7e1a-4224-a606-13e9ba74ca95-1639930843051.jpg" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">
        </div>
    </div>
</body>
</html>

源码下载:http://hovertree.com/h/bjaf/77wklbrj.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120281.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 情感词典构建_晦涩情感词典

    情感词典构建_晦涩情感词典看到一篇文章写的很清楚简洁,直接转了。————————————————————————————————————————某主席说,“没有情感词典的“使用该情感词典进行情感分析”都是耍流氓。”某帝说,“要有情感词典。”

  • 使用Nginx实现负载均衡[通俗易懂]

    使用Nginx实现负载均衡[通俗易懂]负载均衡的作用负载均衡:分摊到多个操作单元上进行执行,和它的英文名称很匹配。就是我们需要一个调度者,保证所有后端服务器都将性能充分发挥,从而保持服务器集群的整体性能最优,这就是负载均衡。负载均衡这里面涉及的东西相对也是比较多的,理论就不说太多了,网上,书上很多,今天我们就利用Nginx服务器来实现一个简单的负载均衡负载均衡算法源地址哈希法:根据获取客户端的IP地址,通过哈…

  • Endnote 参考文献格式设置:字体 字号 行距 悬挂缩进

    我们写论文时,通常使用Endnote管理和插入参考文献时常,Endnote在Word中生成的参考文献列表如下,字体、字号、行距、悬挂缩进的设置都未令人满意。下面介绍设置字体、字号、行距、悬挂缩进的方法。首先,打开Endnote软件,选择【Edit】|【Outpu

  • 如何将onedrive for business扩容为硬盘空间[通俗易懂]

    如何将onedrive for business扩容为硬盘空间[通俗易懂]首先,我们需要下载raidrive软件为我们扩容,那么我们已经申请好学生的5T的包了,若要看如何申请,请到https://graph.org/1%E5%88%86%E9%92%B1onedrive-5T%E8%B4%A6%E5%8F%B7-02-04去查看警告:本文作者只是从网上搜到了该文章,该文章并非本文作者所写,只是推荐而已,涉及版权问题本文作者不承担任何责任!下载raidrive的软件…

  • 网络编程初识和socket套接字[通俗易懂]

    网络的产生不同机器上的程序要通信,才产生了网络:凡是涉及到倆个程序之间通讯的都需要用到网络软件开发架构软件开发架构的类型:应用类、web类应用类:qq、微信、网盘、优酷这一类是属于需要安装的桌

  • 获取MySQL配置文件路径

    获取MySQL配置文件路径在实际工作中,MySQL可能会涉及多个配置文件,但是因为各种原因我们无法找到它们的路,那么我们可以通过以下命令可以找到:首先找到mysqld的路径:$whichmysqld/usr/sbin/mysqld通过mysqld找到所有配置文件的路径:$/usr/sbin/mysqld–verbose–help|grep-A1’Defaultoptions’Defaultopt

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号