fakeLoader页面加载前loading演示8种效果

提高用户体验的插件fakeLoader页面加载前loading演示8种效果
fakeLoader页面加载前loading演示8种效果
 在线预览

下载地址

示例代码

<div id="main">
		<div class="demo">
			<a href="/api/jq/5733e326a88fd/index.html" class="cur">Spinner1
			</a>
			<a href="/api/jq/5733e326a88fd/demo2.html">Spinner2
			</a>
			<a href="/api/jq/5733e326a88fd/demo3.html">Spinner3
			</a>
			<a href="/api/jq/5733e326a88fd/demo4.html">Spinner4
			</a>
			<a href="/api/jq/5733e326a88fd/demo5.html">Spinner5
			</a>
			<a href="/api/jq/5733e326a88fd/demo6.html">Spinner6
			</a>
			<a href="/api/jq/5733e326a88fd/demo7.html">Spinner7
			</a>
			<a href="/api/jq/5733e326a88fd/demo8.html">自定义图片
			</a>
			<div class="result">DEMO1 页面内容已加载完毕。
			</div>
		</div>
	</div>
	<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js">
	</script>
	<script src="/api/jq/5733e326a88fd/fakeLoader.min.js">
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".fakeloader").fakeLoader({
				timeToHide: 1200,
				bgColor: "#2ecc71",
				spinner: "spinner1"
			}
									   );
		}
						 );
	</script>

  

 

jquery实现简单瀑布流布局(续):图片懒加载

# jquery实现简单瀑布流布局(续):图片懒加载

这篇文章是jquery实现简单瀑布流布局思想的小小扩展。代码基于前作的代码继续完善。
图片懒加载就是符合某些条件时才触发图片的加载。最常见的具体表现就是,当页面被请求时,只加载可视区域的图片,其它部分的图片只占位而不加载,只有这些图片出现在可视区域时才会动态加载。具体实现的技术并不复杂,下面分别对其说明。

## 技术路线

jquery实现简单瀑布流布局(续):图片懒加载

  • 怎么加载。首先未加载的图片有一个占位假图片(一般是loading),按照真实图片的大小进行样式化。网上较为常用的思路是对图片元素的父级定义一个data-src属性,用来存放该图片元素的真实src。到用的时候再调用。
  • 加载判断条件:
    首屏一次性加在20张。保证首页有料。
    后边的图片基于以下思路。

jquery实现简单瀑布流布局(续):图片懒加载

往下拉(滚动),找到第一个顶部进入可视区的img,优先加载。

  • 监听位置:
  • 滚动条滚动时,这提示需要写一个新加载的函数。
  • 第二个有点难察觉,就是在getlist方法加载瀑布流完结之前。因为getList一旦调用,就意味着有新的图片进入可视区。不能只靠滚动进行触发

修改getList函数

function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){           
                var $html=null;
                if(i<=20&&n==1){//首屏一次加载20张
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');
                     
                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>'); 
                    $html.find('img').css('opacity','0'); //占位图片不透明度为0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }

        bCheck=true;    
    });
}

加载真实图片的执行函数

function loadClientPic(arr){//arr是页面所有的img标签。
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//进入可视区内!
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }

            }else{
                //console.log('不在可视区!')               
            }
        }else{
            //console.log('已加载')               
        }                     
    }
};

## 最后,在监听位置加上写好的函数

  • 在$(window).scroll(function(){})里加上loadClientPic($(‘img));
  • 不要遗漏getList方法结束前也执行loadClientPic。

## 附录

demo地址 http://djtao.top/ppl/ppl.html

全部代码:

//找出高度最小li的索引值
function getShortestLi(){
    var shortest=0;
    for(var i=1;i<4;i++){
        if($('li').eq(i).height()<$('li').eq(shortest).height()){
            shortest=i;
        }
    }
    return shortest;
}

function createUrl(num){
    return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}


var bCheck=false;
function getList(n){
    $.getJSON(createUrl(n),function(data){
        if(data.length==0){
            return false;
        }else{
            for(var i=0;i<data.length;i++){           
                var $html=null;
                if(i<=20&&n==1){//首屏一次加载20张
                    $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');
                     
                }else{
                    $html=$('<div><img src="images/1.jpg"><p>'+data[i].title+'</p></div>'); 
                    $html.find('img').css('opacity','0'); //占位图片不透明度为0
                } 

                $('li').eq(getShortestLi()).append($html);
                $html.attr('data-src',data[i].preview);
                $html.find('img').css('height',(data[i].height*225/data[i].width)+'px');
                $html.find('img').css('width','225px'); 

            };
        }
        loadClientPic($('img'));//函数临结束执行判断
        bCheck=true;    
    });
}

$(function(){
    var pageNum=1;
    getList(pageNum);
    $(window).scroll(function(){
        
        var $li=$('li').eq(getShortestLi());
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop])
        //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离
        if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){
            if(bCheck){
                bCheck=false;
                pageNum++;

                //console.log(pageNum);
                getList(pageNum); 
            }else{
                return false;
            }
            
        }

        loadClientPic($('img'));
    })
})

function loadClientPic(arr){
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    for(var i=0;i<arr.length;i++){
        if(arr.eq(i).attr('src')=='images/1.jpg'){
            if(arr.eq(i).offset().top<document.documentElement.clientHeight+scrollTop){//进入可视区内!
                arr.eq(i).attr('src',arr.eq(i).parent().attr('data-src'));
                //console.log(i)
                //transition: 1s; opacity: 1
                if(arr.eq(i).attr('src')!=='images/1.jpg'&&arr.eq(i).height()!==0){
                    arr.eq(i).css('transition','1s').css('opacity','1');
                }
                
            }else{
                //console.log('不在可视区!')               
            }
        }else{
            //console.log('已加载')               
        }                     
    }
};

看着那些图片,不由得再感叹一句,歪果仁太会玩了..