loading图片素材下载-求JS图片载入LOADING效果代码

1、首先先把需要下载电子刊视频地址复制起来,然后在百度搜索网站。

2、其次将刚才复制的loading电子刊地址复制到这个网页的搜索栏里,点击开始GO。

3、最后然后右键把网址另存为,选择储存路径下载想要的视频即可。

这是我以前写的,和你的要求差不多,自己修改就能用

代码:

var l=0;

var imgs;

var sum=0;

var imgs=new Array();

function chk(){

l--;

("kk").innerText="dwcli's pain"+((sum-l)*100/sum)+"%"

if (l==0){

("kk").innerHTML="

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>

" target="_blank" >

>";

}

}

function dwcli(){

var dwcli=("div");

("id","kk");

="dwcli's pain";

="gray";

=;

=;

="absolute";

="0px";

="100000000";

="0px";

="50";

="green";

="center";

="0px";

(dwcli);

}

if(){

imgs[0]=new Image();

imgs[1]=new Image();

imgs[2]=new Image();

imgs[3]=new Image();

imgs[4]=new Image();

imgs[5]=new Image();

imgs[6]=new Image();

imgs[7]=new Image();

imgs[0].src="

" target="_blank" >

";

imgs[1].src="

" target="_blank" >

";

imgs[2].src="

" target="_blank" >

";

imgs[3].src="

" target="_blank" >

";

imgs[4].src="

" target="_blank" >

";

imgs[5].src="

" target="_blank" >

";

imgs[6].src="

" target="_blank" >

";

imgs[7].src="

" target="_blank" >

";

}

sum=l=;

for (var i=0;i imgs[i].onload=chk;

imgs[i].onerror=chk;

}

在Hype中自定义loading图:

1.我们来验证一下。打开Hype,这里我提前导入了一张较大的图片。这文稿检查器的选项栏目下,我们可以看到有这么一栏“显示正在加载指示器”,这就是我们之前说的可以开启hype内置的loading图选项。在chrome中预览时我们发现,页面留空了将近半秒钟才显示了加载的内容页面。

2.当我们勾选了“显示正在加载指示器”后,再来预览一下。我们发现在页面中多了一个显示loading的图。这就是hype内置的加载loading指示器。很多用户看到后会觉得他不美观。重点来了,那么我们怎么自定义这张图呢?我们能替换成我们需要加载的loading效果吗?其实很简单,说白了就是替换自带的loading指示器图。

3.首先,为了确保我们使用的loading图能够显示:

一.在文稿检查器中不勾选"显示正在加载指示器"

二.不勾选绘制场景背景

三.导出为HTML5文件的时候,确保你已经勾选了“创建上层文件夹”选项(示意图如下所示)

4.我们将文件命名为test,保存至桌面。

5.打开test文件,通过编辑器打开文件,在编辑器中找到上图选中的这一段代码。到时候我们的图片的代码就是插在这中间的。

6.将如下这段代码复制到上面

<!-- inserted loader code: -->

<div style="position:absolute;height:400px;top:0;left:0px;"> <img src=""> <h3 style="color:gray;">Loading...</h3> </div>

<!-- end inserted loader code -->

7.我从网上下载了一张GIF loading图(),我们就用他来替换hype自带的loading指示器。首先我们需要复制这张gif图的名称(记得将.gif格式一起复制哦)。打开我们之前的编辑器,将 用我们准备的gif图名称代替。打开test文件夹,双击,在浏览器中预览一下,我们发现加载时,有一张裂图出现在了网页中,loading字样则显示在其下方,说明代码还是起作用了。出现的裂图是因为我们没有将gif资源文件放在test文件夹下。

8.我们将资源文件拖入到test文件夹中,我们再来访问一下。这是我们惊喜的发现,loading图已经显示在了网页中。但是对于显示的位置我们不是很满意。那么我们就需要修改之前代表位置的那段代码了。

9.也就是这一段:<div > 。这里我们用百分比来设置loading图在屏幕中显示的位置,设置position:absolute;(绝对定位)无论加载的文件内容位置怎么变,都不会影响loading图的位置。top和left设置的百分比表示距离顶部和左边的距离。设置百分比的好处是:不论你屏幕的尺寸有多不一样,他相对屏幕的位置是不会变的。当然这个距离你可以自行调整,你可以使你的loading图在屏幕的任何位置。为了让页面简洁这里我将loading的字样删除了,当然如果你需要的话你可以保留,还可以在style中更改成你想要的样式。好的,替换完之后,我们通过chrome中的设备模式来预览一下效果吧。这时我们惊奇的发现,loading图已经显示在了屏幕的中间(有偏差可以自行调整)。

10.上传到服务器后,通过访问链接生成的二维码,我们用微信扫一扫在微信浏览器中预览一下效果。这里我们可以看到,加载的效果还是很明显的。刷新一下界面,我们可以发现加载效果还是存在的。这样我们就可以将原先的loading图替换成无论是网上找的还是自己做的,都没问题。小伙伴们是不是已经按耐不住了呢?想自己动手试一下了吧。已附上本次教程的资源文件。