Correct bug on multilload + add loadbar in example

build/webpack.prod.conf.js

@@ -34,6 +34,12 @@ var webpackConfig = merge(baseWebpackConfig, {
       commonjs2: 'imagesLoaded',
       commonjs: 'imagesLoaded',
       amd: 'imagesLoaded'
+    },
+    "lodash.isequal": {
+      root: '_',
+      commonjs2: 'lodash.isequal',
+      commonjs: 'lodash.isequal',
+      amd: 'lodash.isequal'
     }
   },
   vue: {

debug.log

@@ -0,0 +1,2 @@
+[0102/222648:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004
+[0102/222648:ERROR:node_debugger.cc(86)] Cannot start debugger server

example/components/Hello.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="hello">
-    <isotope ref="isotope" :options='options' :list="list" v-images-loaded:on.progress="imageProgress">
-        <div v-for="element in list" :key="element.id">
+    <div class="status">
+      <progress-bar v-show="loading" class="progress-half"  :type="status" :size="'large'" :value="currentImg" :max="maxImg" :show-label="true"></progress-bar>
+    </div>
+
+    <isotope ref="isotope" :options='options' :list="list" v-images-loaded:on="getLoadingCallBack()">
+        <div v-for="element in list" :key="element.id" class="item">
           {{element.name}}
           <img :src="element.src" alt="Not found">
         </div>
@@ -13,6 +17,7 @@
 
 <script>
 import imagesLoaded from '../../src/imagesLoadedDirective'
+import ProgressBar from 'vue-bulma-progress-bar'
 
 import isotope from 'vueisotope'
 const names= ['John', 'Ringo', 'Paul', 'George']
@@ -23,9 +28,9 @@ function getImageSrc () {
   width = Math.round( width * size );
   var height = Math.round( 140 * size );
   var rando = Math.ceil( Math.random() * 1000 );
-  // 10% chance of broken image src
+  // 25% chance of broken image src
   // random parameter to prevent cached images
-  return rando < 100 ? '//foo/broken-' + rando + '.jpg' :
+  return rando < 250 ? '//foo/broken-' + rando + '.jpg' :
     // use lorempixel for great random images
     '//lorempixel.com/' + width + '/' + height + '/' + '?' + rando;
 }
@@ -39,11 +44,16 @@ export default {
   },
   components: {
     isotope,
+    ProgressBar
   },
   name: 'hello',
   data () {
     return {
       list: names.map((name, id)=>{return {name, id, src : getImageSrc()}}),
+      loading: false,
+      maxImg: 0,
+      currentImg: 0,
+      status: 'success',
       options:{
 				layoutMode: 'masonry',
         masonry: {
@@ -56,9 +66,24 @@ export default {
     }
   },
   methods:{
-    imageProgress (imageLoaded, image){
-      console.log('progress', cpt++, image)
-      this.$refs.isotope.layout('masonry')
+    getLoadingCallBack () {
+      return {
+        progress: (instance, img ) => {
+          this.loading = true
+          this.currentImg++
+          this.maxImg = instance.images.length
+          if (!img.isLoaded) {
+            this.status = 'danger'
+          }
+          this.$refs.isotope.layout('masonry')
+        },
+        always: (instance) => {
+          setTimeout(()=> {
+            this.loading = false
+            this.currentImg = 0
+          }, 250);
+        }
+      }
     },
     addItem () {
       this.list.push({name: 'Jimmy', id: count++, src : getImageSrc()})
@@ -79,4 +104,16 @@ export default {
   color: #333;
   border: 2px solid #b6b5b4;
 }
+
+.progress-half{
+  width: 50%;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.status {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
 </style>

example/main.js

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import 'bulma/css/bulma.css'
 
 /* eslint-disable no-new */
 new Vue({

example/simple/index.html

@@ -12,6 +12,7 @@
         <script type="text/javascript" src="bower_components\lodash\dist\lodash.js"></script>
         <script type="text/javascript" src="bower_components\isotope\dist\isotope.pkgd.js"></script>
         <script type="text/javascript" src="bower_components\vue-isotope\dist\vue_isotope.js"></script>
+        <script type="text/javascript" src="bower_components\vue-isotope\dist\vue_isotope.js"></script>
         <script type="text/javascript" src="bower_components\imagesloaded\imagesloaded.pkgd.min.js"></script>
 
          <script type="text/javascript" src="..\..\dist\vueimagesloaded.js"></script>