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

	


随机推荐
	

    
									
  1. About learn《The C programming Language,Second Edition》
			
    Today,My last week buy C language book arrived. Today,I week earnest study. No matter what difficult ...
    
			
    2. 
						
  2. React Hook父组件获取子组件的数据/函数
			
    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...
    
			
    3. 
						
  3. 梁敬彬老师的《收获，不止SQL优化》，关于如何缩短SQL调优时间，给出了三个步骤，
			
    梁敬彬老师的<收获,不止SQL优化>,关于如何缩短SQL调优时间,给出了三个步骤, 1. 先获取有助调优的数据库整体信息 2. 快速获取SQL运行台前信息 3. 快速获取SQL关联幕后信息 ...
    
			
    4. 
						
  4. 跨平台版本迁移之 XTTS 方案操作指南
			
    本文转自 https://blog.csdn.net/Enmotech/article/details/80045576 作者 | 罗贵林: 云和恩墨技术工程师,具有8年以上的 Oracle 数据库工 ...
    
			
    5. 
						
  5. 【转载】【笔记】vue-router之路由传递参数
			
    参考博客地址:https://blog.51cto.com/4547985/2390799 1.通过<router-link> 标签中的to传参 基本语法: <router-link ...
    
			
    6. 
						
  6. Windows性能监控监视器(perfmon使用)
			
    一.在命令窗口或运行中执行perfmon.exe,打开性能监视器 二.在用户定义中,即可新建--数据收集器--性能计数器,步骤如下: 三.添加监控Windows服务器的资源类型,例如:内存(Avail ...
    
			
    7. 
						
  7. openstack-neutron安装与配置
			
    一.实验目的: 1.理解neutron服务在OpenStack中的作用 2.掌握在控制节点上安装配置neutron的方法和步骤 3.掌握在计算节点上安装与配置neutron的方法和步骤 二.实验步骤: ...
    
			
    8. 
						
  8. 关于在maven项目中配置文件资源导出问题
			
    标准的Maven项目都会有一个resources目录来存放我们所有的资源配置文件,但是我们往往在项目中不仅仅会把所有的资源配置文件都放在resources中,同时我们也有可能放在项目中的其他位置,那么 ...
    
			
    9. 
						
  9. 【使用篇二】SpringBoot集成SpringSecurity（22）
			
    SpringSecurity是专门针对基于Spring项目的安全框架,充分利用了依赖注入和AOP来实现安全管控.在很多大型企业级系统中权限是最核心的部分,一个系统的好与坏全都在于权限管控是否灵活,是否 ...
    
			
    10. 
						
  10. el-dialog模态窗点击空白不消失
			
    通过查阅ElementUI的官方文档,可以发现Dialog对话框组件提供了一个close-on-click-modal属性来设置el-dialog模态窗点击空白不消失. <el-dialog : ...
    
			
    11.