lazyimg - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
   "name": "lazyimg",
-  "version": "0.1.5",
-  "description": "图片懒加载",
+  "version": "0.1.6",
+  "description": "image lazyloading.",
   "main": "src/adapter.js",
   "contributors": [
     {
-      "name": "grass.qd",
-      "email": "[e-mail]"
-    },
-    {
-      "name": "_danz",
+      "name": "MrRaindrop",
       "email": "[e-mail]"
     }
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MrRaindrop/lazyimg"
+  },
   "license": "MIT",
@@ -28,7 +28,3 @@ "dependencies": {
     "vinyl-named": "~1.1.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": ""
   }
 }

README.md

@@ -1,48 +0,36 @@
-## 新版 lib-img 库，开源版
+# lazyimg
 
-### 依赖
-1. [appear](http://gitlab.alibaba-inc.com/mtb/lib-appear)
+### NOTE
 
-### 特性
-抽象出懒加载部分作为 [lib-appear](http://gitlab.alibaba-inc.com/mtb/lib-appear) 库, 可实现其他类似懒加载的功能
+this lib depend on [appearjs](https://github.com/MrRaindrop/appearjs).
 
-
 ### APIS
-#### lib.img.fire()
-重新遍历懒加载图片，绑定懒加载, 处理 CDN 后缀. 此方法可以被多次调用,对同一个元素不会处理多次 
 
-#### lib.img.logConfig()
-在 console 中打出当前的配置, 供 debug 使用
+* lib.img.fire()
+* lib.img.logConfig()
 
-### 使用范例
+### demo
 
-```
-    <style>
-        .my-img {
-            display: block;
-            margin-bottom: 10px;
-            width: 5.33rem;
-            height: 4rem;
-        }
+```html
+<style>
+.my-img {
+  margin-bottom: 10px;
+  width: 300px;
+  height: 300px;
+}
+</style>
 
-    </style>
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">    
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
+<img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
     
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">    
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-    <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg">
-        
-    <script>
-        lib.img.fire();
-    </script>
-    
+<script>
+  lib.img.fire();
+</script>
 ```
-
-
-### 更新记录
-

src/adapter.js

@@ -48,2 +48,6 @@ /*
         if (item.nodeName.toUpperCase() == 'IMG') {
+            item.onerror = function () {
+                this.onerror = null;
+                this.src = placeholderSrc
+            }
             item.setAttribute('src', processedSrc);
@@ -53,13 +57,13 @@ if (!placeholderSrc) {
             }
-            item.onerror = function () {
-                this.onerror = null;
-                this.src = placeholderSrc
-            }
         } else {
             preLoadImg(processedSrc, function () {
                 item.style.backgroundImage = 'url("' + processedSrc + '")';
-                item.naturalWidth = this.width
-                item.naturalHeight = this.height
-                dispatchEvent(item, 'load')
+                const naturalWidth = this.width
+                const naturalHeight = this.height
+                dispatchEvent(item, 'load', {
+                    success: true,
+                    size: { naturalWidth, naturalHeight }
+                })
             }, function () {
+                dispatchEvent(item, 'load', { success: false })
                 preLoadImg(placeholderSrc, function () {
@@ -66,0 +70,0 @@ item.style.backgroundImage = 'url("' + placeholderSrc + '")';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Lines of code

103

increased by4.04%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

6870

decreased by-10.54%

Number of lines in readme file

37

decreased by-24.49%

No dependency changes