讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

jQuery滚动加载图片效果的实现_jquery

php中文网
发布： 2016-05-16 17:40:53
原创
1238人浏览过

触发式加载精美特效企业网站源码1.0.0
触发式加载精美特效企业网站源码1.0.0

触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也

触发式加载精美特效企业网站源码1.0.0 0
查看详情 触发式加载精美特效企业网站源码1.0.0
复制代码 代码如下:


/****************滚动加载图片函数****************/
     function scrollLoading(){
         var st = $(window).scrollTop(), sth = st + $(window).height();
         var $targetpics = $("img.scrloadpic");
         var len = $targetpics.length;
         for(var i=0; i         {
             var $temppic = $targetpics.eq(i);
             var post = $temppic.position().top;
             var posb = post + $temppic.height();

             if((post > st && post st && posb              {

                 var url = $temppic.attr("xsrc");
                 if(url != "")
                 {
                    $temppic.attr("src", url);
                    $temppic.attr("xsrc", "");
                 }
             }
         }
     }


　上面是实现滚动加载的一个功能函数；下面在html代码中需要在img中加一个xsrc属性暂时存放真实图片的路径，src中则存放loading图片的路径，为每个需要实现这个功能的图片加一个名字为“scrloadpic”的类。
复制代码 代码如下:

jQuery滚动加载图片效果的实现_jquery

　最后在调用函数。
复制代码 代码如下:

scrollLoading();
$(window).bind("scroll", scrollLoading);
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法_jquery 下一篇：根据经纬度计算地球上两点之间的距离js实现代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript的memoization是什么_它如何缓存结果？ Memoization是通过缓存“输入→输出”映射来避免重复计算的优化技术，需函数纯、参数可序列化，缓存需手动管理，非JavaScript内置但可手写或借助工具实现。
2025-12-15 21:10:02
761
javascript的currying是什么_它如何实现部分应用？ 柯里化是将多参数函数转换为单参数函数链的机制，通过闭包记忆已传参数，直至参数总数满足才执行；它强制分步调用，而部分应用更灵活，可一次预填任意数量参数。
2025-12-15 21:05:22
480
JavaScript中的性能监控是什么_如何测量和优化关键渲染路径？ JavaScript性能监控核心是优化关键渲染路径（CRP），即HTML→DOM→CSSOM→渲染树→布局→绘制→合成流程；通过DevTools分析长任务、FCP阻塞资源及NavigationTiming，内联关键CSS、defer/async脚本、压缩资源、避免强制重排，并用web-vitals持续验证CoreWebVitals指标。
2025-12-15 20:51:06
693
怎样实现javascript函数缓存_它如何加速计算过程？ JavaScript函数缓存通过存储输入与输出映射实现重复调用直接返回结果，仅适用于纯函数；需注意键的正确性、参数序列化限制及内存管理，可将指数级计算降为线性并避免重复I/O或渲染。
2025-12-15 20:49:33
745
如何使用javascript修改CSS样式_有哪些方法？ 直接操作style属性适合动态设置少量样式；切换className或classList更易维护且支持动画；动态插入CSS规则适用于主题切换等场景；getComputedStyle用于读取最终计算样式。
2025-12-15 20:48:46
214
javascript中的Web Workers是什么_如何用它实现多线程 WebWorkers是浏览器提供的后台线程机制，用于执行耗时任务而不阻塞主线程；每个Worker独立运行、无DOM访问权限，通过postMessage通信，支持fetch等API但不可操作DOM。
2025-12-15 20:48:06
905
如何用javascript实现动画效果_有哪些技术可选？ JavaScript实现动画的核心是按时间规律更新元素视觉属性并触发重绘；推荐requestAnimationFrame打底，CSStransitions处理基础交互，WebAnimationsAPI用于精细控制，复杂场景选用GSAP等库，并优先使用transform/opacity避免重排。
2025-12-15 20:47:17
825
JavaScript中的字符串方法有哪些？ JavaScript字符串常用核心方法约十几种，分为基础操作（length、charAt等）、查找判断（indexOf、includes等）、截取替换（slice、replace等）和格式转换（toLowerCase、trim等）四类，日常开发中includes、split、slice、replace、trim及大小写转换最常用。
2025-12-15 20:45:07
650
JavaScript数据类型有哪些_如何检测它们？ JavaScript有8种数据类型：7种原始类型（string、number、boolean、null、undefined、symbol、bigint）和1种引用类型（object）；检测时应优先用typeof判断原始类型（需单独处理null），复杂类型统一用Object.prototype.toString.call()确保准确。
2025-12-15 20:43:02
657
JavaScript解构赋值如何操作_能用于哪些数据结构？ JavaScript解构赋值是高频实用特性，支持数组（按位置）和对象（按属性名）直接解构，可延伸至字符串、Map、Set及函数返回值，但不支持null、undefined等原始类型。
2025-12-15 20:28:31
677
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部