add loading

lisz · lisz · commit 1a48fe1685d6 · 2019-05-29T08:42:02.000+08:00
diff --git a/image.html b/image.html
@@ -14,9 +14,12 @@
 #imageList li a{display: block;}
 #imageList li img{width: 50px;height: auto;}
 #clipboardInput{margin:20px 0;}
+
+#showLoading {position: absolute;width: 100%;height: 100%;z-index: 9999;top: 0;left: 0;text-align: center;display: none;}
+#showLoading .bg {position: absolute;width: 100%;height: 100%;background: #000000;opacity: 0.02;}
 </style>
-<script type="text/javascript" src="js/cos-js-sdk-v5.min.js"></script>
-<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="./js/cos-js-sdk-v5.min.js"></script>
+<script type="text/javascript" src="./js/image.js"></script>
 </head>
 <body>
 <textarea style="display: block;position: absolute;top: -300px;" id="hidden"></textarea>
@@ -37,6 +40,10 @@
 <div id="showImage">
     <img src="">
 </div>
+<div id="showLoading">
+    <div class="bg"></div>
+    <img src="./static/loading.gif" />
+</div>
 
 </body>
 </html>
diff --git a/js/image.js b/js/image.js
@@ -16,12 +16,13 @@ var image = {
         ID('btn').addEventListener('click', function () {
             that.start();
         });
+
         // 上传图片
         file.addEventListener('change', function (e) {
             var file = e.target.files[0],
                 name = cos.getRandomName(this.value);
 
-            cos.send(name, file);
+            cloud.upload(name, file);
         });
 
         // 绑定图片点击事件
@@ -56,7 +57,7 @@ var image = {
                 for (var i = 0; i < items.length; i++) {
                     if (items[i].type.indexOf('image') !== -1) {
                         file = items[i].getAsFile();
-                        cos.send(cos.getRandomName(file.name), file);
+                        cloud.upload(cos.getRandomName(file.name), file);
                         break;
                     }
                 }
@@ -130,6 +131,19 @@ var image = {
     }
 };
 
+var cloud = {
+    upload: function (name, file) {
+        var type = 'cos';
+        switch (type) {
+            case 'cos':
+                cos.send(name, file);
+                break;
+            default:
+                break;
+        }
+    }
+};
+
 var cos = {
     // 上传图片到腾讯云
     send: function (name, file) {
@@ -139,6 +153,7 @@ var cos = {
             Bucket: '',
             Region: ''
         };
+        loading();
         chrome.storage.sync.get(config, function (items) {
             var cos = new COS({
                 SecretId: items.SecretId,
@@ -159,6 +174,7 @@ var cos = {
                 } else if(data.Location!='') {
                     image.insert(data.Location);
                 }
+                loading(true);
             });
         });
     },
@@ -179,6 +195,11 @@ function ID (id) {
     return document.getElementById(id);
 }
 
+function loading (close) {
+    var close = close || false;
+    ID('showLoading').style.display = close ? 'none': 'block';
+}
+
 setTimeout(function () {
     image.init();
 }, 300);
diff --git a/readme.md b/readme.md
@@ -3,20 +3,17 @@
 ![image](logo.png)
 
 - 截图后直接粘帖到文本框
-
-![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2019-5-28/go0hk9pka7u.png)
-
 - 图片上传完成后自动加入剪贴板
 - 点击图片复制 `markdown` 格式图片
 - 需要配置[腾讯云存储参数](https://console.cloud.tencent.com/cos)
 ![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2019-5-8/s7eofkfk4hj.png)
 
-- 示例图片
-
 | 来源 Origin | 操作 Methods | Allow-Headers | Expose-Headers | 超时 Max-Age |
 |-- | -- | -- | -- | -- |
 | * | PUT,GET,POST | * | ETag | 30 |
 
+- 示例图片
 
+![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2019-5-28/go0hk9pka7u.png)
 ![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2018-7-12/4fgtltq2xeg.png)
 
diff --git a/static/loading.gif b/static/loading.gif
