在網上找資料的時候，看到網上有圖片加載進度的效果，手癢就自己也寫了一個。

圖片加載完后，隱藏loading效果。

想看加載效果，請ctrel+F5強制刷新或者清理緩存。

效果預覽：

0%

代碼如下：

HTML5+javascript實現圖片加載進度動畫效果

.loading {width:200px;height:200px;position:relative;margin:50px auto;border:1px solid #f90;border-radius:%;}

.dot {width:%;;height:%;animation:rond .8s infinite;-webkit-animation:rond .8s infinite;}

.dot:after {width:10px;height:10px;position:absolute;top:-5px;left:90px;content:"";display:table;background-color:#f50;border-radius:%;}

.num {width:%;height:%;position:absolute;top:;left:;line-height:200px;text-align:center;font-size:20px;color:#f60;}

@keyframes rond {

% {transform:rotate(0deg);}

% {transform:rotate(360deg);}

}

@-webkit-keyframes rond {

% {-webkit-transform:rotate(0deg);}

% {-webkit-transform:rotate(360deg);}

}

.photo {width:860px;margin: auto;display:none;text-align:center;}

.photo img {width:200px;margin: 5px;border:1px solid #ddd;border-radius:5px;}

%

var loading = document.querySelector(".loading"),

num = document.querySelector(".num"),

photo = document.querySelector(".photo"),

imgs = [

"http://img4.cache.netease.com/photo/0001/2015-03-16/AKQU47JM00AP0001.jpg",

"http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU47OJ00AP0001.jpg",

"http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU482200AP0001.jpg",

"http://img6.cache.netease.com/photo/0001/2015-03-16/AKQU486800AP0001.jpg",

"http://img5.cache.netease.com/photo/0001/2015-03-16/AKQU48C000AP0001.jpg",

"http://img1.gtimg.com/12/1206/120657/12065709_1200x1000_0.jpg",

"http://img1.gtimg.com/12/1206/120657/12065712_1200x1000_0.jpg",

"http://img1.gtimg.com/12/1206/120657/12065713_1200x1000_0.jpg"

],

len = imgs.length;

for (var i=; i

var img = new Image();

img.src = imgs[i];

img.onload = function () {

i--;

num.innerHTML = ((len-i) * / len) + "%";

photo.innerHTML += "";

if (i == ){

photo.style.display = "block";

loading.style.display = "none";

}

};

}

判斷頁面加載完

document.onreadystatechange = function () {

if(document.readyState == "complete") {

alert("OK!");

}

}

仿UC瀏覽器圖片加載進度條

前幾天用UC瀏覽器看新聞(無意中給UC打了廣告),看到它的圖片加載進度條,正好最近有時間,所以就自己寫了一個. 效果圖如下 進度條的底色和填充顏色都可以調整. 首先中間的笑臉作為一個整體,其實現代碼如 ...

Android 自定義View修煉-自定義加載進度動畫XCLoadingImageView

一.概述 本自定義View,是加載進度動畫的自定義View,繼承于ImageView來實現,主要實現蒙層加載進度的加載進度效果. 支持水平左右加載和垂直上下加載四個方向,同時也支持自定義蒙層進度顏色. ...

Android酷炫加載進度動畫

概述 本自定義動畫進度酷炫View,是加載進度動畫的自定義View,繼承于ImageView來實現,主要實現蒙層加載進度的加載進度效果. 支持水平左右加載和垂直上下加載四個方向,同時也支持自定義蒙層進 ...

炫！一組單元素實現的 CSS 加載進度提示效果

之前的文章個大家分享過各種類型的加載效果(Loading Effects),這里再給大家奉獻一組基于單個元素實現的 CSS 加載動畫集合.這些加載效果都是基于一個 DIV 元素實現的,十分強悍. 溫馨 ...

[Swift通天遁地]五、高級擴展-(11)圖像加載Loading動畫效果的自定義和緩存

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★?微信公眾號:山青詠芝(shanqingyongzhi)?博客園地址:山青詠芝(https://www.cnblogs. ...

css3 linear-gradient實現頁面加載進度條效果

最終效果圖: html結構:

?? ??? ??? ?&lt ...

【React Native】進階指南之一(特定平臺、圖片加載、動畫使用)

一.特定平臺代碼 React Native提供了兩種方法來區分平臺: 使用Platform模塊: 使用特定平臺擴展名: 1.Platform模塊 React Native提供了一個檢測當前運行平臺的模 ...

【JavaScript】圖片加載由模糊變清晰 —— 圖片優化

開發過程中,一些圖片的展示時,加載很慢很久,后來把圖片縮放壓成縮略圖吧,速度是快了但是模糊不清,如何處理這樣問題,下面就和大家分享一下自己的處理方法. 先讓客戶端加載像素小的縮略圖:

js實現頁面圖片加載進度條

//html

隨機推薦

jms的倆種模式

package com.jiangchong.job; import java.util.Date; import javax.jms.Connection; import javax.jms.Con ...

設置SQLServer數據庫中某些表為只讀的多種方法

原文:設置SQLServer數據庫中某些表為只讀的多種方法 翻譯自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...

HTML DOM (文檔對象模型)

當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model). HTML DOM 模型被構造為對象的樹. HTML DOM 樹 通過可編程的對象模型,JavaScrip ...

Win7 64位下安裝64bit MS SQL Server2005時安裝不了Reporting Services的處理辦法

警告截圖: 解決辦法: 在cmd窗口運行如下腳本即可: "cscript %SYSTEMDRIVE%\inetpub\adminscripts\adsutil.vbs SET W3SVC/A ...

es索引管理工具-curator

elasticsearch-curator??是官方收購的開源社區周邊產品,用來管理es的索引和快照. 官方文檔:https://www.elastic.co/guide/en/elasticsear ...

git pull總是要輸入賬號和密碼

如果你用git從遠程pull拉取代碼,每次都要輸入密碼,那么執行下面命令即可 git config --global credential.helper store 這個命令則是在你的本地生成一個賬號 ...

【PAT】B1059 C語言競賽(20 分)

這個題也是個邏輯問題 此題用我這種方式很復雜,應該用map 用兩個分別儲存成績,已領過獎的人, #include #include int a ...

AutoCompleteTextView和自定義的CursorAdapter

用雅虎天氣接口和AutoCompleteTextView開發天氣應用(1) 2014/03/20 | 分類:?ANDROID,?開發?|?2 條評論?| 標簽:?天氣,?安卓開發 分享到:5 jQue ...

sql server作業管理查看/進程管理查看命令

一.作業管理 (1) select * from msdb.dbo.sysjobhistory? ?可以查看作業的歷史記錄 (2) select * from msdb.dbo.sysjobs? ?查 ...

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。