跳到主要内容

使用SVG制作时尚的预加载器

这篇文章首次出现在问题228.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

在本教程中,我将向您展示如何让用户与您的网站保持足够长的时间,以便加载将您的主页设置为其余部分的图像。

它基于Gaya Design的QueryLoader并利用Raphal创造美丽的矢量形状。我们的教程将从中获取大量图像Flickr的显示预加载的动作。

速度很重要

所有网站都有可能产生全球影响,这种影响肯定取决于您的网站从“0%”变为完全加载所需的时间。

我们都有过等待Flash预加载器加载其资产的经验。但至少有时,我们不得不等待多长时间的交互式,有趣的指标减少了挫败感。使用HTML及其推进方式,我们唯一的方式是指示我们网站下载的距离是通过百分比更新状态栏,还是地址栏中的微调器。

入门

考虑到这一点,我们将详细介绍如何为用户提供这种视觉效果 - 希望能够吸引他们的注意力足够长的时间,以便为您的内容提供应有的报道。
我们将使用梦幻般的SVG库Raphal创建预加载器。我们将使用GayaDesign中现有的原始QueryLoader库。原始脚本为我们提供了一个加载栏,它在屏幕上显示并在图像加载时填充,因此前几个步骤将删除QueryLoader打包的样式,以便我们可以实现自己的样式。

1.文件夹

在项目文件夹中是名为的文件夹CSSJS和demo.html文件。该CSS文件夹是空的但将包含Style.css文件。该JS文件夹包含jQuery和Raphal;只有在CDN没有响应时才使用这些库。

2.新项目

打开Demo.html文件。身体我们有两个

元素:一个包含要预加载的图像,另一个包含预加载器。在我们完成加载之前,图像对用户是不可见的。

预加载器包含两个元素,其中一个是我们的加载器,另一个是我们放在加载器上方的圆圈。下面是我们的JavaScript,我们不需要编辑Demo.html因为我们所有的代码都将由JavaScript处理,但了解壁纸和石膏背后的砖块总是好的。

  • 3.添加CSS

    在这里,我们为预加载器和一些初始可见性添加一些基本样式。我选择了颜色作为预加载器的占位符,我们可以看到持续改进和代码工作。你可以随时删除它;只是删除背景:粉红色;

    #loading {position:absolute;宽度:100%;身高:100%; background:#fff;} #loading .circle {width:206px;身高:206px;位置:绝对;左:50%;最高:50%;保证金:-103px 0 0 -103px; background:pink;} #loading #loader {width:220px;身高:220px;位置:绝对;左:50%;最高:50%;保证金:-110px 0 0 -110px;背景:透明;}

    4.预加载

    现在用一些JavaScript使页面活跃起来。打开Queryloader.js在里面JS夹。在这里,我们添加了一些属性,以便将它们全部捆绑在同一个对象中,以减少内存浪费。我们稍后将在本教程中更多地参考这些属性。

    var QueryLoader = {overlay:“”,loadBar:“”,preloader:“”,items:new Array(),doneStatus:0,doneNow:0,selectorPreload:“body”,logoImg:false,logoCircle:false,fakeCircle: false,ieLoadFixTime:2000,ieTimeout:“”,initialise:true,sec:0,raph:false,init:function(){

    5.获得高度

    就在里面在里面函数我们将添加一个小jQuery调整用于调整页面高度的功能,以反映用户是否在任何时候调整其窗口大小。如果没有这个,如果用户垂直缩小页面,你可能会将预加载器丢失到强大的折叠。

    ... initialise:true,sec:0,raph:false,init:function(){$(window).resize(function(){$('#loading')。height($(window).height() );}); $( '#装载')的高度($(窗口).height()); if(navigator.userAgent.match(/ MSIE(\ d +(?:\。\ d +)+(?:b \ d *)?)/)==“MSIE 6.0,6.0”){//如果IE6返回则中断假; } if(QueryLoad.selectorPreload =='body'){QueryLoader.spawnLoader(); QueryLoader.getImages(QueryLoader.selectorPreload); QueryLoader.createPreloading(); } else {$(document.ready(function){QueryLoader.spawnLoader(); ...

    6.精简

    在原始的QueryLoader脚本中,有一些我们不需要的代码。代码会在页面中注入一些HTML,我们将在稍后使用Raphal进行操作 - 所以这对我们来说是不必要的。你应该在第115行附近找到这个Queryloader.js

    spawnLoader:function(){if(QueryLoader.selectorPreload ==“body”){var height = $(window).height(); var width = $(window).width(); var position =“fixed”; } else {var height = $(QueryLoader.selectorPreload).outerHeight(); var width = $(QueryLoader.selectorPreload).outerWidth(); var position =“绝对”; } var left = $(QueryLoader.selectorPreload).offset()['left']; var top = $(QueryLoader.selectorPreload).offset()['top']; // <<<第6步开始删除QueryLoader.overlay = $(“ 
    “).appendTo($(QueryLoader.selectorPreload)); $(QueryLoader.overlay).addClass(”QOverlay“); $(QueryLoader.overlay).css({position:position,top:top,left:left,width :width +“px”,height:height +“px”}); QueryLoader.loadBar = $(“
    “).appendTo($(QueryLoader.overlay)); $(QueryLoader.loadBar).addClass(”QLoader“); $(QueryLoader.loadBar).css({position:”relative“,top:”50%“, width:“0%”}); // <<< End removal},

    7.仿终点线

    在这里我们适应DoneLoad功能,告诉#画廊显示;从技术上讲,这意味着设置显示财产到。我们还告诉jQuery动画的不透明度#loading屏幕所以我们淡出了#loading在从DOM中删除它之前的元素。

    doneLoad:function(){//阻止IE调用fix clearTimeout(QueryLoader.ieTimeout); //确定效果预加载器的高度if(QueryLoader.selectorPreload ==“body”){var height = $(window).height(); } else {var height = $(QueryLoader.selectorPreload).outerHeight(); } //步骤7添加此代码$('#gallery')。show(); $('#loading')。animate({'opacity':0},1200,function(){$(this).remove();})

    8.更精简

    接下来我们从原始加载栏中删除更多代码,此代码可以在步骤7中输入的代码下方找到。原始动画将淡出并移除自身(在步骤7中)我们告诉我们的库出现并淡出装载机。我们将在本教程结束时调整更多此功能。

    doneLoad:function(){... $('#gallery')。show(); $('#loading')。animate({'opacity':0},1200,function(){$(this).remove();})// <<<步骤8删除此代码$(QueryLoader.loadBar ).animate({height:height +“px”,top:0},500,“linear”,function(){$(QueryLoader.overlay).fadeOut(800); $(QueryLoader.preloader).remove() ;}); // <<<结束删除}

    9.增加过程

    我们正在打电话给UpdateVal功能在这里,它将更新我们的SVG圈。QueryLoader.doneNow是在页面加载过程中完成的图像数。105是指圆的半径和This.sec是Raphal SVG路径。

    imgCallback:function(){QueryLoader.doneNow ++; QueryLoader.updateVal(QueryLoader.doneNow,this.items.length,105,this.sec); QueryLoader.animateLoader();},

    10.更多功能

    我们在这里添加UpdateVal功能正好在ImgCallback功能。如果初始化参数为true表示我们有一个圆形来制作动画并继续绘图。此外,如果圆圈完整,我们必须欺骗圆圈,因为我们不能做360度弧。

    updateVal:function(value,total,R,hand,id){if(QueryLoader.initialise){if(value == total){this.raph.clear(); // 2.1.1  - 循环完成。 this.fakeCircle = this.raph.circle(110,110,105).attr({color:'',“stroke-width”:10}); } else {hand.animate({arc:[value,total,R]},0,“>”); },},

    11.搬运服务

    我们正在删除更多使用原始QueryLoader脚本注入的HTML。以前这会将元素注入到DOM中以提高1px

    在屏幕上制作动画,但由于使用SVG,这是不必要的。

    createPreloading:function(){QueryLoader.preloader = $(“ 
    “).appendTo(QueryLoader.selectorPreload); $(QueryLoader.preloader).css({height:”0px“,width:”0px“,overflow:”hidden“});

    12.输入Raphal

    现在有趣的是:我们创建两个SVG元素来接管HTML中的元素。我们为SVG设置了一些变量和属性来理解。该#loader大于#innerCircle,这给出了加载器是一个正在加载的边界的错觉。

    createPreloading:function(){var logoC = Raphael(“innerCircle”,206,206); $('#innerCircle')。css('z-index','31'); this.logoCircle = logoC.circle(103,103,103).attr({'stroke':'rgb(125,208,163)','fill':'url(wave.jpg)',“stroke-width”:0}); this.raph = Raphael(“loader”,220,220),xy = 110,R = 210,this.initialise = true,param = {stroke:“#000”,“stroke-width”:10},//自定义属性this.raph.customAttributes.arc = function(value,total,R){var alpha = 360 / total * value,a =(90-alpha)* Math.PI / 180,x = xy + R * Math。 cos(a),y = xy  -  R * Math.sin(a),color ='rgb(29,79,107)',path; path = [[“M”,xy,xy-R],[“A”,R,R,0,+(alpha> 180),1,x,y]]; // MATRIX PATH返回{path:path,stroke:color}; }; ...

    13.自定义属性

    这是一个复杂的数学迷宫,它最终给出了一个矩阵路径,可以将弧线绘制成弧形。幸运的是,唯一的关键值是[R(半径);这些是动画的UpdateVal,如前所述。颜色也在此处设置,但可以根据需要进行调整。

    // Custom Attributethis.raph.customAttributes.arc = function(value,total,R){var alpha = 360 / total * value,a =(90  -  alpha)* Math.PI / 180,x = xy + R * Math .cos(a),y = xy  -  R * Math.sin(a),color ='rgb(29,79,107)',path; if(total == value){path = [[“M”,xy,xy-R],[“A”,R,R,0,+(alpha> 180),1,x,y]]; } else {path = [[“M”,xy,xy  -  R],[“A”,R,R,0,+(alpha> 180),1,x,y]]; } return {path:path,stroke:color};};

    14.颜色属性

    这在前一个结束后直接进行CustomAttribute.arc功能。它被用在了UpdateVal功能,是加载图像后产生完整圆圈效果的关键。颜色可以自定义甚至替换为图像,但是在自定义时确保将所有值更改为相同,否则最终会出现多色圆圈!

    this.raph.customAttributes.colour = function(){return {stroke:'rgb(29,79,107)'};};

    15.部门

    在上一个代码之后,我们在生成路径并设置其弧(这将从步骤13调用我们的弧函数)之后定义扇区。因为这只是在我们打电话时设置我们的预加载器UpdateVal,我们设置加载图像的数量0

    var length = QueryLoader.items.length; this.sec = this.raph.path()。attr(param).attr({arc:[0,60,R]}); QueryLoader.updateVal(0,length,105,this.sec,2);

    16.动画

    AnimateLoader在每个图像完成加载后调用。我们替换了大部分逻辑,所以我建议只重写函数。该函数计算出等待加载的图像数量,如果我们超过99%,我们会触发DoneLoad

    animateLoader:function(){var perc =(100 / QueryLoader.doneStatus)* QueryLoader.doneNow; var angle =(3.6 * perc); QueryLoader.updateVal(QueryLoader.doneNow,this.items.length,105,this.sec, 2); if(perc> 99){QueryLoader.doneLoad();}},doneLoad:function(){...

    17.定制

    在这里,我们淡出每个圆圈的不透明度,然后淡出并完全删除预加载元素。此时我们有一个完整的预加载器,可以在浏览器中使用IE7;但是,我们可以更进一步,增加一个额外的个性元素。

    ... doneLoad:function {... var qLoad = this; qLoad.sec.hide(); qLoad.logoCircle.stop()。animate({opacity:0},700); qLoad.fakeCircle.stop()。 animate({opacity:0},700,'easeInOut'); $('#loading')。css('min-height','auto')。animate({top:($(window).height()*  -  1)+'px'},'800',函数(){$(this).remove();});}); ...

    18.收缩元素

    通过使用CSS变换,我们可以缩放或“缩小”元素。在当前情况下,这意味着圆圈,以便在它们淡出屏幕之前为它们提供充电的外观。我们通过使用“变换”动画包装不透明度动画来实现此目的。

    ... doneLoad:function(){... var qLoad = this; qLoad.sec.hide(); qLoad.logoCircle.stop()。animate({transform:“s0.6 0.6 103 103”},'1000 ',“easeInOut”); qLoad.fakeCircle.stop()。animate({transform:“s0.6 0.6 110 110”},'1000',“easeInOut”,function(){qLoad.logoCircle.stop()。 animate({opacity:0},700); qLoad.fakeCircle.stop()。animate({opacity:0},700,'easeInOut'); $('#loading')。css('min-height', 'auto')。animate({top:($(window).height()*  -  1)+'px'},'800',function(){$(this).remove();});} );} ...

    19.飞过

    添加关键帧和动画定义意味着我们可以通过CSS和JavaScript应用CSS变换,以便创建我们在此处显示的屏幕效果。 Voil:我们的大型图片库有一个可爱的预加载器!

    / * Keyframes * / @  -  webkit-keyframes fly-away {0%{-webkit-transform:translate3d(0,0,0); } 100%{-webkit-transform:translate3d(0,-900px,0); @  -  moz-keyframes fly-away {0%{-moz-transform:translate(0,0); } 100%{-moz-transform:translate(0,-900px); @  -  ms-keyframes fly-away {0%{-ms-transform:translate(0,0); } 100%{-ms-transform:translate(0,-900px); }} ...


    翻译字数超限