jquery实现图片延时加载,实现原理:不设置img的src地址,把地址存在img的alt中,当img标签出现在可视区域,alt值传给src。为避免看到替换文本alt,把字体的颜色设置为背景的颜色,如果背景不是单一色就给个相近色吧,我把值存在alt里是想兼容IE等浏览器。

如果各位有更好的办法,欢迎留言!

html代码如下:

 
 

 <!doctype html>
<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){
var body = $("body");
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = $(window).height();
//获取当前窗口的可见宽度
var windowWidth = $(window).width();
body.find("img").each(function(){
//获取图片的src属性
src = $(this).attr("alt");
//获取图片的绝对位置
offset = $(this).offset();
if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
//先隐藏 再淡入
$(this).css("display","none");
$(this).attr("src",src).removeAttr("alt").fadeIn("slow");
}
}); }); $(window).on("scroll",function(){
var body = $("body");
var offset = null;
var src = null;
//获取当前窗口的可见高度
var windowHeigth = $(window).height();
//获取当前窗口的可见宽度
var windowWidth = $(window).width();
body.find("img").each(function(){
//获取图片的src2属性
src = $(this).attr("alt");
if(src){
//获取图片的绝对位置
offset = $(this).offset();
if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
//先隐藏 再淡入
$(this).css("display","none");
$(this).attr("src",src).removeAttr("alt").fadeIn("slow");
}
}
}); }); </script> <style>
#test{width:180px;float:left;}
#test img{width:180px;margin-top:20px;height:100px;float:left;color:#FFF;}
.a{width:2000px;height:200px;float:left;}
</style> </head>
<body>
<div id="test">
<img alt="http://img0.bdstatic.com/img/image/shouye/mxly-9537473768.jpg"/>
<div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/mcpwb-9530134528.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/shouyegx2b.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/gxxhbjdl-10011146040.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/qcqctj-9902962988.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/qcbaoma3.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/sjjdsj-4855163457.jpg"/>
<img alt="http://imgstatic.baidu.com/img/image/f9dcd100baa1cd114a9ecc2ebb12c8fcc3ce2d97.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/jjcy-9567536987.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/jjct-10067496396.jpg"/>
<img alt="http://img1.bdstatic.com/img/image/364d6ca7bcb0a46f21f6421031ef4246b600c33ae62.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img.baidu.com/img/image/fjbz.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> <img alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
<img alt="http://img.baidu.com/img/image/fjbz.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
<div class="a"></div> <div class="a"></div> <div class="a"></div>
<img alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
<img alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/> </div> </body>
<html>


jquery延迟加载的更多相关文章

  1. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  3. jquery延迟加载(懒加载)插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  4. 提取数据库字段里面的值,并改变+图片懒加载,jquery延迟加载

    要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...

  5. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  6. jquery 延迟加载代码

    <!--引入以下两个js文件--> <script type="text/javascript" src="./js/jquery.min.js&quo ...

  7. 使用jQuery延迟加载js文件

    //异步加载js文件并调用函数 function delayCall(calledFunction, funcParams, jsUrl) { if (eval('typeof '+calledFun ...

  8. Lazy Load Plugin for jQuery延迟加载测试成功

    一直需要的功能,网页图片太多时对于降低网络流量超有用. 最新的V1.9.3版本其实已不用修改就可以起作用了. 不用网上说的要自己修改代码.

  9. Jquery 延迟加载框架

    http://www.appelsiini.net/projects/lazyload

随机推荐

  1. Android五大布局详解——TableLayout(表格布局)

    TableLayout 前面所学的LinearLayout和RelativeLayout两大布局已经完全适用于各种开发条件下,其他的布局仅供参考学习,毕竟知识就是力量,以后的开发过程中万一遇到也能游刃 ...

  2. 团队项目之Scrum6

    小组:BLACK PANDA 时间:2019.11.26 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 编辑功能优化 实现主页内容展示 今天计划完成的工作 2 内容展示 根 ...

  3. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. linux下安装make工具

    安装make工具 make工具依赖gcc ,automake,autoconf,libtool,make 这些安装包 可以一起安装 center os系统 运行如下命令yum install gcc ...

  5. SQL Server之批量清理数据库的死锁

    DECLARE killspid CURSOR  FOR (SELECT  CONVERT(VARCHAR(100), request_session_id)  FROM  sys.dm_tran_l ...

  6. bayaim_Centos7.6_mysql源码5.7-multi_20190424.txt

    用户名/密码mysql/mysql 一.安装mysql: 位置位于 /data/mysql 如果遇到依赖,无法删除,使用 rpm -e --nodeps <包的名字> 不检查依赖,直接删除 ...

  7. nginx基础(1)

    目录 一.概念 基础概念 响应码 请求和响应报文的格式 http无连接 我叫张贺,贪财好色.一名合格的LINUX运维工程师,专注于LINUX的学习和研究,曾负责某中型企业的网站运维工作,爱好佛学和跑步 ...

  8. 简单的PHP上传图片实例

    分享一个简单的PHP上传图片实例,本实例主要介绍了上传图片的一些限制判断和上传图片的方法. 首先我们在form表单加上上传附件#file,上传按钮#imgbut,记得给form 表单加上multipa ...

  9. CAD简易口诀,保你一天就记住!零基础也能轻松学!CAD制图宝典!

    如何才能快速的学习CAD制图呢?不仅仅需要多练习,CAD口诀也是不能错过的哦!实用干货这一个就够了快点收藏起来! 1.创建直线的快捷方式是L+空格 2.创建圆的快捷方式是C+空格 3.创建圆弧的快捷方 ...

  10. 微信小程序新服务消息推送 —— 订阅消息

    微信团队前不久公测了「订阅消息」,原有的小程序模板消息接口将于 2020 年 1 月 10 日下线,届时将无法发送模板消息.「订阅消息」将完全替代「模板消息」,这两天得空测试了一波. 1.下发权限机制 ...