修复图片onerror的场景下不停请求的问题

be-fe · Jun 4, 2018 · b9613d1 · b9613d1
1 parent b693560
commit b9613d1
Show file tree

Hide file tree

Showing 10 changed files with 7,779 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -41,5 +41,5 @@
     "index.html",
     "gulp"
   ],
-  "version": "2.2.2"
+  "version": "2.2.3"
 }
diff --git a/build/iSlider.js b/build/iSlider.js
@@ -186,7 +186,7 @@
      * version
      * @type {string}
      */
-    iSlider.VERSION = '2.2.2';
+    iSlider.VERSION = '2.2.3';
 
     /**
      * Event white list
@@ -905,6 +905,9 @@
             case _NT.pic:
                 if (item.load === 2) {
                     insertImg();
+                }
+                if (item.load === -1) {
+
                 }
                 else {
                     var currentImg = new Image();
@@ -915,6 +918,9 @@
                         insertImg();
                         item.load = 2;
                     };
+                    currentImg.onerror = function () {
+                        item.load = -1;
+                    }
                 }
                 break;
             case _NT.dom:
@@ -1066,7 +1072,7 @@
             var data = this.data;
             var len = data.length;
             var self = this;
-            var loadImg = function preloadImgLoadingProcess(index) {
+            var loadImg = function (index) {
                 var item = data[index];
                 if (self._itemType(item) === 'pic' && !item.load) {
                     var preloadImg = new Image();
@@ -1076,6 +1082,9 @@
                         item.height = preloadImg.height;
                         item.load = 2;
                     };
+                    preloadImg.onerror = function () {
+                        item.load = -1;
+                    }
                     item.load = 1;
                 }
             };

diff --git a/build/iSlider.min.js b/build/iSlider.min.js
diff --git a/build/index.bundle.js b/build/index.bundle.js
@@ -605,7 +605,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * version
 	     * @type {string}
 	     */
-	    iSlider.VERSION = '2.2.2';
+	    iSlider.VERSION = '2.2.3';
 
 	    /**
 	     * Event white list
@@ -1324,6 +1324,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	            case _NT.pic:
 	                if (item.load === 2) {
 	                    insertImg();
+	                }
+	                if (item.load === -1) {
+
 	                }
 	                else {
 	                    var currentImg = new Image();
@@ -1334,6 +1337,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        insertImg();
 	                        item.load = 2;
 	                    };
+	                    currentImg.onerror = function () {
+	                        item.load = -1;
+	                    }
 	                }
 	                break;
 	            case _NT.dom:
@@ -1485,7 +1491,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var data = this.data;
 	            var len = data.length;
 	            var self = this;
-	            var loadImg = function preloadImgLoadingProcess(index) {
+	            var loadImg = function (index) {
 	                var item = data[index];
 	                if (self._itemType(item) === 'pic' && !item.load) {
 	                    var preloadImg = new Image();
@@ -1495,6 +1501,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        item.height = preloadImg.height;
 	                        item.load = 2;
 	                    };
+	                    preloadImg.onerror = function () {
+	                        item.load = -1;
+	                    }
 	                    item.load = 1;
 	                }
 	            };

diff --git a/demo/image.html b/demo/image.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport"
+          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+    <title>iSlider loop</title>
+    <link href="public/css/iSlider.css" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: #333;
+            overflow: hidden;
+        }
+
+        /*ul wrapper*/
+        #iSlider-wrapper {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            position: absolute;
+        }
+
+        #iSlider-wrapper ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        #iSlider-wrapper li {
+            position: absolute;
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-pack: center;
+            -webkit-box-align: center;
+            list-style: none;
+        }
+
+        #iSlider-wrapper li img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    </style>
+
+</head>
+<body>
+<div id="iSlider-wrapper"></div>
+<div id="hidden-space" style="display:none">
+    <p style="font-size:3em;text-align: center;color:#04f512">A node in dom tree.</p>
+</div>
+<script type="text/javascript" src="public/js/iSlider.js"></script>
+<script type="text/javascript" src="public/js/iSlider.animate.js"></script>
+<script id="show-code">
+    var list = [
+        // picture
+        {
+            content: './imgs/pic.jpg'
+        },
+        {
+            content: './imgs/mob.png'
+        },
+        {
+            content: './imgs/no-exsit.png'
+        },
+        {
+            content: './imgs/no-exsit1.png'
+        },
+        {
+            content: './imgs/no-exsit2.png'
+        },
+        {
+            content: './imgs/no-exsit3.png'
+        },
+    ];
+
+    var S = new iSlider(document.getElementById('iSlider-wrapper'), list, {
+        isAutoplay: 1,
+        isLooping: 1,
+        isOverspread: 1,
+        animateTime: 800
+    });
+</script>
+</body>
+</html>
diff --git a/demo/public/js/iSlider.js b/demo/public/js/iSlider.js
@@ -186,7 +186,7 @@
      * version
      * @type {string}
      */
-    iSlider.VERSION = '2.2.2';
+    iSlider.VERSION = '2.2.3';
 
     /**
      * Event white list
@@ -905,6 +905,9 @@
             case _NT.pic:
                 if (item.load === 2) {
                     insertImg();
+                }
+                if (item.load === -1) {
+
                 }
                 else {
                     var currentImg = new Image();
@@ -915,6 +918,9 @@
                         insertImg();
                         item.load = 2;
                     };
+                    currentImg.onerror = function () {
+                        item.load = -1;
+                    }
                 }
                 break;
             case _NT.dom:
@@ -1066,7 +1072,7 @@
             var data = this.data;
             var len = data.length;
             var self = this;
-            var loadImg = function preloadImgLoadingProcess(index) {
+            var loadImg = function (index) {
                 var item = data[index];
                 if (self._itemType(item) === 'pic' && !item.load) {
                     var preloadImg = new Image();
@@ -1076,6 +1082,9 @@
                         item.height = preloadImg.height;
                         item.load = 2;
                     };
+                    preloadImg.onerror = function () {
+                        item.load = -1;
+                    }
                     item.load = 1;
                 }
             };

diff --git a/demo/public/js/iSlider.min.js b/demo/public/js/iSlider.min.js