足球游戏_中国足彩网¥体育资讯$

当滚动条到图片才显示图片
来源:易贤网 阅读:2008 次 日期:2014-08-13 16:27:37
温馨提示:易贤网小编为您整理了“当滚动条到图片才显示图片”,方便广大网友查阅!

当滚动条条滚动到图片位置再显示图片,像淘宝,京东等网站都采用了这样的js技术,这样可以是带宽使用减少,也可以增加用户体验。

下面将滚动条到图片才能显示图片的构思说一下:

即:当滚动条滚动时出发检查事件,检查每一个图片位置,当图片距离页面顶部位置小于滚动条加上浏览器高度时,则图片进行显示输出

jquery代码如下

首先将图片,设置一个value属性,让其为真实图片位置值,设置另一个src为一个小图片为等待图片。当图片达到图片位置时,将value值赋给src即可。

$(function(){

 $(window).scroll( function() { 

  $("img").each(function(i){

    if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){

    $(this).attr("src",$(this).attr("value"));

   }

 });

 });

});

解释一下上面的代码,本代码采用jquery弄的, offset().top是获取图片距离顶部高度当小于滚动条滚动距离document.documentElement.scrollTop加上浏览器高度$(window).height()时则进行显示,在这里-200是为了看效果,当图片出来200像素的 时候才进行图片显示

网上采用了jquery的jquery.lazyload.js公开组件,代码如下:

$(function(){

  $("img").lazyload({

      placeholder : "默认等待图片",

      effect      : "fadeIn"

      });

});

采用的jquery的组件:下载lazyload.js

<script language="javascript" src="jquery.lazyload.js"></script>

这就是当滚动条到图片处才显示图片的代码。

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
易贤网手机网站地址:当滚动条到图片才显示图片
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标