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)
blank

相关推荐

  • node.js win7环境搭建与基本测试

    node.js win7环境搭建与基本测试

  • mysql安装教程csdn_安装配置mysql教程

    mysql安装教程csdn_安装配置mysql教程一、下载地址:https://dev.mysql.com/downloads/mysql/当前最新是8.0版本,我选择上一个最新的mysql-5.7.24-winx64.zip二、安装MySQL安装文件分两种.msi和.zip,.msi需要安装zip格式是自己解压,解压缩之后其实MySQL就可以使用了,但是要进行环境变量配置zip格式是自己解压我的电脑->属性->高级->环境…

  • 独立成分分析(Independent Component Analysis,ICA)模型介绍

    独立成分分析(Independent Component Analysis,ICA)模型介绍目录独立成分分析(IndependentComponentAnalysis,ICA)模型介绍1历史背景2ICA基本模型3独立与不相关独立成分分析(IndependentComponentAnalysis,ICA)模型介绍你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基…

  • Unity+Android GET和POST方式的简单实现API请求(人像动漫化)

    Unity+Android GET和POST方式的简单实现API请求(人像动漫化)Unity与Android的简单交互,Unity打开Android相册并调用

  • pycharm专业版学生激活_pycharm激活教程

    pycharm专业版学生激活_pycharm激活教程Pycharm专业版_学生用户激活Pychram学生账户激活FreeEducationalLicenses填写申请人信息无法接受邮箱申请Pychram学生账户激活FreeEducationalLicensesFreeEducationalLicenses网址点击Applynow填写申请人信息填写个人信息,邮箱必须使用校园邮箱号,每个大学都有对应的邮箱帐号,可以去校园网自行申请点击申请免费产品无法接受邮箱申请如果出现无法接受电子邮件地址,点击蓝色的“官方文件”进行申请确认

  • 阿帕基_jojo唯一一个没有荒木线的人

    阿帕基_jojo唯一一个没有荒木线的人阿帕基死前脑海里浮现的场景阿帕基:你在那里干什么啊?警察先生警察:抱歉打扰你吃饭了,我正在调查,我在采集指纹,昨晚,对面人行道上发生了一起抢劫案,被害者被人用酒瓶殴打,碎片散了一地。但人行道上的碎

发表回复

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

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