jquery的lazyload插件分步显示图片的方法

最新推荐文章于 2022-04-08 23:11:58 发布
最新推荐文章于 2022-04-08 23:11:58 发布
阅读量854 收藏
点赞数
分类专栏： Jquery J2EE-jsp-jstl-json-tlds
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cgwcgw_/article/details/17716781
版权

1


2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<body>
	<img data-original="images/001.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/002.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/003.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/004.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/005.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/006.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/007.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/008.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<img data-original="images/009.jpg" src="js/grey.gif"
		height="1077" border="0" />
	<br />
	<br />
	<script src="js/jquery-1.7.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="js/jquery.lazyload.js" type="text/javascript"
		charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			$("img").lazyload({
				effect : "fadeIn"
			});
		});
	</script>
</body>
</body>

</html>



                

        

        

    




    

      

        

            

              
                
                  静山晚风
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
js滚动到指定位置显示或隐藏元素

				
			

			

				

					weixin_44614518的博客
				

				

					08-04
					
					3697
					
				

			

		

		

			
				
在写小米商城购买页的时候有个导航栏需要在滚动页面到一定位置的时候固定显示，反之隐藏
官网页面 连接：https://www.mi.com/buy/detail?product_id=14206
1、 HTML

2、css

3、js

4、先获取滚动的时候页面的高度，用scrollTop（）方法，scroll是滚动事件，scrollTop变量是用来保存获取到页面高度值，然后判断scrollTop是否大于自己设置的页面高度，我这里设置为203，如果滚动页面高度大于这个设置的高度则这个模块显示，我的是通过设置

			
		

	



                

              
                



	

		

			

				
					
现实jquery.lazyload.js图片懒加载

				
			

			

				

					qq_45699034的博客
				

				

					12-04
					
					159
					
				

			

		

		

			
				
使用方法

引用jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>


为图片加入样式lazy  图片路径引用方法把src改为data-original

<img class="lazy" data-original="img/bmw_m1_hood.

			
		

	



                


  
              

                


	

		

			

				
					
jQuery插件-Lazy Load延迟加载图片

				
			

			

				

					a280606790的专栏
				

				

					12-06
					
					716
					
				

			

		

		

			
				
jQuery插件-Lazy Load延迟加载图片


Posted 2012-12-01  | 分类: Web  jQuery  Linux  研发实践 
   

Web  jQuery 





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

			
		

	





	

		

			

				
					
JQuery JQuery第三方插件(jquery.lazyload.js),懒加载(页面拉到下面才去加载图片)

				
			

			

				

					houyanhua1的专栏
				

				

					03-19
					
					649
					
				

			

		

		

			
				
demo.html：&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
        div {
            hei

			
		

	



		

			
		



	

		

			

				
					
使用jquery插件lazyload.js延迟加载图片，页面上存在切换的情况，切换后图片不显示问题

				
			

			

				

					adiss_may的博客
				

				

					08-29
					
					4990
					
				

			

		

		

			
				
遇到页面上存在切换的情况，切换后不显示图片， 正常是需要滚动一下才显示当前屏的图片
查找网上解决办法，找到这个，
$("img").lazyload({
skip_invisible : false
});
初始化时添加这段，解决。

详见： http://www.jb51.net/article/46985.htm

			
		

	





	

		

			

				
					
jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件

				
			

			

				

					Leo_DLi的博客
				

				

					01-07
					
					1275
					
				

			

		

		

			
				
最近使用 jquery.lazyload.js 这个jQuery插件的时候, 突然发现对这个插件相对全面的介绍不多.

特别是对lazyload()方法中的配置选项的介绍少之又少.

随机整理一份供大家参阅.

废话不多少, 直接上代码:


$("img.lazy").lazyload({
  // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  placeholder : "img/lazy.gif", //用图片提前占位
  // eff

			
		

	





	

		

			

				
					
11 个超棒的 jQuery 分步指引插件

				
			

			

				

					weixin_30487317的博客
				

				

					04-29
					
					323
					
				

			

		

		

			
				
当一个网站或者一个Web应用推出新功能时，为了让用户了解你的站点（或应用）如何操作，往往都会在站点（应用）中添加一个分步指引的效果。然而这样的效果，对于不懂原生JS的同学来说，是件很头痛的事情。下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件，你可以根据自己需求定制，它们都具有一个时尚的外观，而且简单易用。1.Intro.jsIntro.js 使用一种引导式的方式来一步步介绍...

			
		

	





	

		

			

				
					
jquery插件lazyload.js延迟加载图片的使用方法

				
			

			

				

					12-11
				

			

		

		

			
				
Lazy Load 插件原理 修改目标img元素的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把网页可视区域中的img的src属性还原然后加载图片，从而制造了一种缓冲加载的效果。代码引入方法：  代码如下:&...

			
		

	





	

		

			

				
					
jQuery lazyLoad图片延迟加载插件的优化改造方法分享

				
			

			

				

					10-27
				

			

		

		

			
				
**jQuery lazyLoad图片延迟加载插件的优化与改造**  jQuery lazyLoad.js插件是一个非常流行的JavaScript库，它允许开发者在网页中实现图片的延迟加载。这个功能的主要目的是提高页面加载速度，尤其是对于拥有大量...

			
		

	





	

		

			

				
					
jquery.lazyload  实现图片延迟加载jquery插件

				
			

			

				

					12-12
				

			

		

		

			
				
 怎么实现ImageLazyLoad 一、使用JQuery插件 ，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小） 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...

			
		

	





	

		

			

				
					
android-material-stepper-分步管理控件，可用于欢迎页，分步提交表单等.zip

				
			

			

				

					09-24
				

			

		

		

			
				
分步管理控件，可用于欢迎页，分步提交表单等依赖:compile 'com.stepstone.stepper:material-stepper:2.2.0'  Mobile stepper with progress bar   Horizontal stepper  详细使用参考：https://github.com/stepstone-tech/android-material-stepper 

			
		

	





	

		

			

				
					
jQuery滑动式分步注册表单插件

				
			

			

				

					12-11
				

			

		

		

			
				
这是一款使用jQuery制作的分步注册表单插件。整个注册过程分为多个小页面，每个页面均以滑动动画过渡，并且带有简单的验证功能。

			
		

	





	

		

			

				
					
stepsjs:使用步骤 js 分步构建表单

				
			

			

				

					07-01
				

			

		

		

			
				
步骤js
 以经过验证的顺序步骤分割您的表单
 ＃＃入门
你将需要 Node、Bower 和 Grunt
 克隆回购： 
 git clone git://github.com/micahblu/stepsjs.git
cd 进入目录： 
 cd stepsjs
安装节点依赖： 
 npm install
安装 Bower 依赖项： 
 bower install
运行咕噜声： 
 grunt
假设您有一台在 localhost 上运行的服务器并且可以访问 stepsjs 目录，您可以通过以下方式查看示例设置： 
这里发生了什么？
 本质上，stepsjs 的工作方式是使用 handlesbarsjs 模板和一个配置对象，该对象填充来自 jQuery 选择器的传递元素中的步骤。
 下面是示例构建中使用的非常简单的 handlebarsjs 模板设置的工作示例（在 src/index.htm

			
		

	





	

		

			

				
					
bootstrap分步插件bwizard

				
			

			

				

					04-17
				

			

		

		

			
				
bootstrap分步插件bwizard

			
		

	





	

		

			

				
					
H5 jQuery分步流程插件.zip

				
			

			

				

					07-11
				

			

		

		

			
				
代码片段：


	$(function () {
initStep();
  });
  function initStep() {
$(".steps").step({
 stepNames: ['购买', '付款', '发货', '收货', '评价', '完成'],
 initStep: 3
})
  }

  function previousStep() {
$(".steps").step("previous");
  }
  function nextStep() {
$(".steps").step("next");
  }
  function gotoStep(step) {
$(".steps").step("goto", step)
  }

             

			
		

	





	

		

			

				
					
图片动态加载技术应用及jquery.lazyload插件使用实例

				
			

			

				

					09-22
				

			

		

		

			
				
图片动态加载原理并不复杂,图片还是用原来的img标签,src指向一个默认的小图。这个功能现在被做成了很多插件.我用的叫 jquery.lazyload，下面与大家分享下它的具体引用与调用方法，感兴趣的朋友可以参考下哈

			
		

	





	

		

			

				
					
jQuery图片延迟加载插件Lazy Load特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
**jQuery图片延迟加载插件Lazy Load详解**  在现代网页设计中，图片的使用十分常见，但这也可能导致页面加载速度变慢，影响用户浏览体验。为了优化网页性能，开发者常常采用"图片延迟加载"（Lazy Load）技术。jQuery...

			
		

	





	

		

			

				
					
LayUI⑹：分步表单

				
			

			

				

					dawn0718的专栏
				

				

					04-08
					
					4300
					
				

			

		

		

			
				
　　在前端的开发中，页面多了让人纠结，也不好组织，在LayUI中有几种解决办法，分步表单就是比较不错的选择，缺点也明显，所有的页面集中在一个页面中，代码量也大。

　　在系统参数维护中，用户提出要一步步选择来维护，这样可以减少操作错误，我使用了LayUI的分步表单来完成。

　　用户的维护操作在一个页面中。

　　代码量有点大了，HTML部分将近180行，JavaScript代码将近500行，为了调试，我还是集中在一个HTML文件中。

　　开始网页界面部分设计得有点复杂，300行，结果因为一个<DI

			
		

	





	

		

			

				
					
form-step:Dcat Admin 分步表单扩展

				
			

			

				

					05-09
				

			

		

		

			
				
Dcat Admin 分步表单扩展
安装
使用

			
		

	





	

		

			

				
					
jquery.lazyload插件实现图片延迟加载

					
最新发布

				
			

			

				

					05-25
				

			

		

		

			
				
jquery.lazyload是一款jQuery插件，可以实现图片的延迟加载。当页面加载时，只会加载可视区域内的图片，当页面滚动时，再加载其他的图片，这样可以提高网页的加载速度和用户体验。  使用jquery.lazyload插件，需要先...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
静山晚风

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值