`
qinya06
  • 浏览: 597532 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

瀑布式 区域 延迟加载

 
阅读更多
jquery.masonry.min.js
 <div class="waterfall-case " style="width:980px;margin-top:25px;display:none;">
<div class="item ">
<div class="caseItem">
<div class="title">
<img src="../static/images/tmp/h1.jpg" alt=""/>
<p>郭某谋</p>
</div>
<div class="style">
 <ul>
 <li><div class="left">户型:</div><div class="right"></div></li>
 <li><div class="left">面积:</div><div class="right"></div></li>
 <li><div class="left">风格:</div><div class="right"></div></li>
 <li><div class="left">色系:</div><div class="right"></div></li>
 </ul>
</div>
<div class="desc">
本批住宅退房中,以大户型高总价居多,120平方米以上房源共16套,占总住宅退房量的75%,其中200平方米以上的房源有7套,有6套来自同一品牌开发商,这6套房源以花园洋房和别墅为主。此次退房房源中,90平方米以下的户型仅有4套,包含永宁星座的2套56.83平方米的小公寓。
</div>

<div class="keyword">
<div class="left">关键字:</div><div class="right"></div>

</div>
<div class="clear"></div>
</div>
</div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900032_470x470.jpg" src="" alt="" /><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900022_470x470.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900019_470x470.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h4.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h5.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h3.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h2.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>



</div> 
</div>

--------------------------
var $container2 = $('.waterfall-case').eq(0);  
	    $container2.find("img").each(function(){
	  	  
	    	$(this).attr("src",$(this).attr("src1"));
	    	});

         $container2.imagesLoaded(function(){
           $container2.masonry({
             itemSelector : '.item',
             columnWidth : 326
           });
         });
         $container2.show(); 

-------------------------------------------
 
var initTop = 0;
$(window).scroll(function() {
		 var scrollTop = $(document).scrollTop();
		 if(scrollTop > initTop){
			  if($(window).scrollTop() > $(document).height()-1100){
					fallPos= fallPos+1;
					  var $container = $('.waterfall-case,.waterfall-bowen').eq(fallPos);   
					  $container.find("img").each(function(){
					  	  
					    	$(this).attr("src",$(this).attr("src1"));
					    	});

				         $container.imagesLoaded(function(){
				           $container.masonry({
				             itemSelector : '.item',
				             columnWidth : 326
				           });
				         });
				         $container.show(); 
		      }
		 } else {
			
			if($(".fall"+(fallPos)).length>0){
				//console.log($(".fall"+(fallPos)).offset().top+"  "+$(window).scrollTop());
			  if($(".fall"+(fallPos)).offset().top < $(window).scrollTop()+800){
				  if(fallPos>0)
				  fallPos= fallPos-1;
					  var $container = $('.waterfall-case,.waterfall-bowen').eq(fallPos);   
					  $container.find("img").each(function(){
					  	  
					    	$(this).attr("src",$(this).attr("src1"));
					    	});

				         $container.imagesLoaded(function(){
				           $container.masonry({
				             itemSelector : '.item',
				             columnWidth : 326
				           });
				         });
				         $container.show(); 
		      }
		 }
		 }
		 initTop = scrollTop;
	
			
		});
分享到:
评论

相关推荐

    瀑布式网页

    瀑布式网页则按需加载,初期只加载可视区域的内容,降低了初次加载时间,对用户网络条件友好。 3. **SEO挑战**:瀑布式网页对搜索引擎优化(SEO)带来一定挑战,因为搜索引擎爬虫可能无法像用户一样无限滚动抓取...

    瀑布流(集成懒加载)

    懒加载(Lazy Loading)是一种优化网页性能的技术,它延迟加载非可视区域的资源,直到用户滚动到这些资源所在的位置。在瀑布流中,懒加载尤其重要,因为它避免了一次性加载大量图片导致的页面加载速度慢的问题。只有...

    jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果

    在这个项目中,"jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果"主要涉及以下几个关键知识点: 1. **jQuery**:jQuery简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在瀑布流布局中,jQuery...

    jq 图片延迟加载 瀑布雨

    图片延迟加载通过只加载可视区域内的图片,当用户滚动页面时,即将进入可视区域的图片才会被加载,从而减少首屏加载时间和数据消耗。jQuery库提供了一些插件,如`jquery.lazyload.js`,可以帮助开发者轻松实现这一...

    瀑布流分页加载asp.net mvc demo

    8. **前端优化**:为了提高用户体验,需要考虑延迟加载(lazy loading)技术,即只加载当前可视区域内的图片,当用户滚动时,再加载即将进入视口的图片。这可以显著减少初次加载时的网络负担。 9. **响应式设计**:...

    瀑布流加载模式样例

    7. **响应式设计**:为了适应不同设备和屏幕尺寸,瀑布流加载模式需要具备响应式设计。可以使用媒体查询或者jQuery的`.resize()`方法来动态调整列数和内容项的大小。 通过以上步骤,我们可以用jQuery实现一个功能...

    瀑布流的网络加载资源

    在瀑布流布局中,我们通常不会一次性加载所有图片,而是采用懒加载(Lazy Loading)技术,即只加载可视区域内的图片,当用户滚动页面时,新进入可视区的图片再进行加载。这样可以显著减少首屏加载时间,提高用户体验...

    jQuery实现瀑布流滚动加载分页效果

    1. **延迟加载**:为了提高页面性能,可以使用懒加载策略,只有当元素进入可视区域时才加载其图片或其他资源。 2. **适应性设计**:确保布局在不同屏幕尺寸和设备上都能正常工作,这可能需要使用媒体查询或响应式...

    8款Jquery+html5实现无限加载瀑布流特效

    2. **图片懒加载**:延迟加载非可视区域内的图片,减少首屏加载时间,提升页面加载速度。 3. **计算布局**:通过JavaScript动态计算元素的宽度和位置,实现自适应的瀑布流布局。 4. **AJAX请求**:向服务器请求新的...

    仿新浪微博下拉加载更多数据瀑布流效果

    7. **延迟加载**:为减少首次加载时的数据量和提高加载速度,可以采用懒加载策略,即在用户滚动到可视区域附近时才加载对应的数据。 8. **图片加载库**:为了高效地加载和显示图片,通常会引入图片加载库,如Glide...

    模仿新浪微博下拉加载更多数据瀑布流效果

    7. **延迟加载**(ListLazyLoad):考虑到用户体验,我们可以采用延迟加载技术,即图片或数据只有在进入视口时才开始加载。这样可以减少初始页面加载时间,提升页面性能。 综上所述,实现模仿新浪微博的下拉加载更...

    CSS+DIV瀑布流

    3. **延迟加载**:对于大量图片的瀑布流,可以使用懒加载(lazy loading)技术,只加载可视区域内的图片,提高页面加载速度。 总之,CSS+DIV瀑布流布局是Web前端开发中的一个重要技巧,通过巧妙地结合CSS和...

    简单的jquery随机美女图片瀑布流无限加载.zip

    7. **图片优化**:对于大量图片的加载,可能还需要考虑图片的压缩、延迟加载(lazy loading)等优化策略,以减少页面加载时间和提高用户体验。 这个项目提供了学习和实践前端开发,特别是jQuery和动态加载效果的好...

    国外多样式瀑布流

    4. **延迟加载**:为了提高页面加载速度,Wookmark支持懒加载,即只有当用户滚动到可视区域时,才会加载更多的内容。 5. **简单易用**:Wookmark-jQuery的API设计简洁,开发者可以快速上手,进行个性化设置和扩展。 ...

    瀑布流布局并自动加载实现代码

    3. **处理图片加载**:由于图片加载可能会有延迟,为了避免布局在图片完全加载前就已经完成,可以使用`imagesLoaded`插件(Masonry通常会与之配合使用)来确保所有图片加载完毕后再执行布局。 示例代码如下: ```...

    javascript适合移动端的响应式瀑布流插件

    总结来说,通过JavaScript实现移动端的响应式瀑布流插件,需要结合媒体查询、事件监听、布局计算、延迟加载、动画效果以及兼容性处理等多种技术,以提供流畅、适应性强的用户体验。开发者可以选择现有的库作为基础,...

    瀑布流

    1. 延迟加载(Lazy Loading):为了提高页面加载速度,可以对远离视口的内容进行延迟加载,只有当用户滚动到相关内容区域时才开始加载。 2. 预加载:预测用户可能滚动到的下一批内容,并提前加载,减少等待时间,...

    基于jQuery简单可自定义响应式手机电脑端瀑布流

    此外,考虑到性能,通常会在用户滚动页面时,采用懒加载技术(Lazy Loading)来只加载可视区域内的元素,避免一次性加载所有内容导致页面加载速度慢。 在提供的压缩包文件`jquery-pbl`中,可能包含了实现这个功能的...

    jQuery实现的瀑布流效果, 向下滚动即时加载内容

    4. **延迟加载**:为了提高页面加载速度,通常只加载用户可视区域内的内容,当接近底部时,再加载更多的数据。这可以通过计算滚动位置和元素距离顶部的距离(`$(element).offset().top`)来实现。 5. **Ajax请求**...

    电商类图文混排瀑布流

    7. **延迟加载和预加载**:为优化性能,可以实现图片的延迟加载,即只在单元格进入可视区域时才加载对应的图片。同时,预加载技术可以在当前可视范围之外预先加载一部分图片,减少滚动时的空白区域。 8. **动画效果...

Global site tag (gtag.js) - Google Analytics