jquery延迟加载

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延迟加载的更多相关文章

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
jQuery延迟加载插件(Lazy Load)详解
最新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代码,使用占位图片作为img标签的s ...
jquery延迟加载（懒加载）插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
提取数据库字段里面的值，并改变+图片懒加载，jquery延迟加载
要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
jquery 延迟加载代码
 <script type="text/javascript" src="./js/jquery.min.js&quo ...
使用jQuery延迟加载js文件
//异步加载js文件并调用函数 function delayCall(calledFunction, funcParams, jsUrl) { if (eval('typeof '+calledFun ...
Lazy Load Plugin for jQuery延迟加载测试成功
一直需要的功能,网页图片太多时对于降低网络流量超有用. 最新的V1.9.3版本其实已不用修改就可以起作用了. 不用网上说的要自己修改代码.
Jquery 延迟加载框架
http://www.appelsiini.net/projects/lazyload

随机推荐

CODING 2.0：为什么我们需要 DevOps
CODING 在前两天的 Kubecon 2019 大会上发布了 CODING 2.0.这背后是 CODING 对研发管理和研发团队组建的思考.从 CODING 成立以来,我们一直在探索"让 ...
一条简单的更新语句，MySQL是如何加锁的？
看如下一条sql语句: # table T (id )) delete : MySQL在执行的过程中,是如何加锁呢? 在看下面这条语句: : 那这条语句呢?其实这其中包含太多知识点了.要回答这两个问题 ...
表单生成器(Form Builder)之mongodb表单数据查询——关联查询
这一篇接着记录一下查询相关的操作.想象一下,如果想要在一张表格中展示某些车辆的耗损和营收情况,我们该怎么处理.车辆.耗损.营收各自存储在一张表中,耗损和营收中冗余了车辆信息……我们便想到了关联查询.m ...
BZOJ2301/LG2522 「HAOI2011」Problem B 莫比乌斯反演数论分块
问题描述 BZOJ2301 LG2522 积性函数若函数 $f(x)$ 满足对于任意两个最大公约数为 $1$ 的数 $m,n$ ,有 $f(mn)=f(m) \times f(n)$ ...
图解SynchronousQueue原理-公平模式
SynchronousQueue原理详解-公平模式一.介绍 SynchronousQueue是一个双栈双队列算法,无空间的队列或栈,任何一个对SynchronousQueue写需要等到一个对Sync ...
[读论文]Shading-aware multi view stereo
如何实现refine的? 几何误差和阴影误差如何加到一起? 为了解决什么问题? 弱纹理或无纹理:单纯的多视图立体算法在物体表面弱纹理或者无纹理区域重建完整度不够高,精度也不够高,因此结合阴影恢复形状来 ...
AJAX-CORS 跨域
1.CORS就是一套AJAX跨域问题的解决方案. 2.CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问. 3.CORS浏览器支持情况: Chrome 3+ Firefox ...
IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2
3 背景属性大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2 CSS中常见的控制背景的属性除了使用表 ...
python3 连接 zookeeper
zookeeper的增删改查 watch监听. from kazoo.client import KazooClient import time,os import timeit os.chdi ...
Redis入门（一）-Redis简介
最近几年,Rddis非常的火,受到广大中大型公司,特别是互联网公司的青睐.而作为后端开发,如果你不知道Redis或不会用,没用过,你都不好意思出去找工作.可想而知Redis对于IT行业意义多么重大.对 ...

jquery延迟加载

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

随机推荐

热门专题