{"_id":"ng-lazyload-image","_rev":"56-30a488b19e0b08fa361a3b935170d67f","name":"ng-lazyload-image","description":"Lazy image loader for Angular > v2","dist-tags":{"latest":"9.1.3","beta":"9.0.1-beta.1"},"versions":{"3.0.0":{"name":"ng-lazyload-image","version":"3.0.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.0.0","scripts":{},"_shasum":"76025c9c35e3e68239f405ac8d2488eb06b1d3fb","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"shasum":"76025c9c35e3e68239f405ac8d2488eb06b1d3fb","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.0.0.tgz","integrity":"sha512-+7b3q2TqpjisiaoC501zPqSUtwTFZYyqsuVSeFDaedUpxBp54+OBb/R6cIeDpP9Hia4c+HLwAhxPX+EmhlUhlg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHNCe1dgvkrh6P0zGsQzVTCe6xtZZbLw/wBw2gWY8pmAIhAP8jISsrq4m0yGAry/VN/dj/1txYBWLMmjGj5xCh/8xg"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/ng-lazyload-image-3.0.0.tgz_1490447791116_0.9578971909359097"},"directories":{}},"3.1.0":{"name":"ng-lazyload-image","version":"3.1.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.1.0","scripts":{},"_shasum":"73899a43bd5345459f8f994578f052b2b5736726","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"shasum":"73899a43bd5345459f8f994578f052b2b5736726","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.1.0.tgz","integrity":"sha512-RG9HDuRDjOma5FYoqp3uN2xGMEL6L7DnxDEwdmTetli+tMHIiVtC9XI1bj5OAKfcwjOm9sz7z6SDD9z11zdz2g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaky4qvjIb8Dq0SGmFCHZrzuYwt5TbNvB6J3EnpV0K5wIgUyhqULxbhf5uIN8ZVF9zZJ0hAYWciAmisYFW6eeMLSE="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/ng-lazyload-image-3.1.0.tgz_1491117833475_0.7739925279747695"},"directories":{}},"3.1.1":{"name":"ng-lazyload-image","version":"3.1.1","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.1.1","scripts":{},"_shasum":"7bdbc92a744d852a03768e0a5c5dbc8af03b0680","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"shasum":"7bdbc92a744d852a03768e0a5c5dbc8af03b0680","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.1.1.tgz","integrity":"sha512-DVIRKUiTx1KOaWHlb3kEZsrl3Gch4l7+nf6HXSW8OR6jCcfDABUudRF27MpswM3EcqV7QSx61HJdUcldif1j6g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcomt2iB3bdtBAhlY7AIPO55CyM5Wqv9KsYugfOpwxQAiAAgDR7GspO01SCJZASu/5f88hqSlcd5tFa8Z4F1tuuAA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/ng-lazyload-image-3.1.1.tgz_1494526534816_0.16070965002290905"},"directories":{}},"3.2.0":{"name":"ng-lazyload-image","version":"3.2.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.2.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-PtcEtBRUdu/lB/d/qdnWbH4eSk7VdQVbUvZDsGKIN+SPD8NjvYRUObdytbdUBCKv/IeJ43bpzbm/7CdeRdmlQw==","shasum":"1641587fcb9c88db48991331b10db5a28c519ae8","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChPPj0MLjxYwVstnKsXKdeQ06iZcDG00vN2ickZqPdoQIhAMkhMYYBLsf2ahyF9cRgsvKM3O/ok5qS0oXYfYj/rg9z"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.2.0.tgz_1500400922648_0.1621038904413581"},"directories":{}},"3.2.1-beta.0":{"name":"ng-lazyload-image","version":"3.2.1-beta.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.2.1-beta.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-+7q9Cf4xTBomfyGDNnO8hLvCqbgVps61gUuWp0sautb7APfSfg8EfuCH3IP6nGcOYAMpRz/Zx+N74Idx6pyOdw==","shasum":"2782f92a6400b8cbaf9b1d9d2ba801b0ce47fd96","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.2.1-beta.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYdPUVjcm+0N/nczYBBGgEtlAgbkPNJtbq0D7yRibocAiAcaHe3gYVo2dT+hDGbqOynWq5xmcZlxyctTVCOMeCoOA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.2.1-beta.0.tgz_1500535925169_0.7376298976596445"},"directories":{}},"3.2.1":{"name":"ng-lazyload-image","version":"3.2.1","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.2.1","_npmVersion":"5.3.0","_nodeVersion":"8.1.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-keEOpma1HM4y2NAYT795RrLz2USTXxZBU4OElZ33grepI9IQ+qpO9YnD7ISujhtGn3tjewo7O+PKEYb2R1zwRQ==","shasum":"89eedade55970972a53bc0d2277c8ab72497f5db","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.2.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXQFJJflh6aDS9A1xGGpgkP9nhs8nOh7GS52G1NlMh9QIgV7dtKcDWoZzk+mbvCUNpZRvJDZmKwzngeta+PhFfCew="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.2.1.tgz_1500566751232_0.544383404077962"},"directories":{}},"3.2.2":{"name":"ng-lazyload-image","version":"3.2.2","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.2.2","_npmVersion":"5.2.0","_nodeVersion":"8.1.3","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-L18HzaGLCFovOvgcDIL7lWy1Hu/CEDqIhoMhPapDWBKzrp4b9LD7Xj2+1CIO7aZtf0ZiY1T2HoeW9rEqm1xCdQ==","shasum":"9b82844cacbf641e6dea2a411eb35b7ce260c0c0","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.2.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYZdenV/2jQiVxvcfDf47t9tscIMIb7d/He316L7vBdwIgT/KGKKfTmNT/rN4hDVVfQze65pxf4epkRxma04tDwv0="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.2.2.tgz_1500881518517_0.9243426159955561"},"directories":{}},"3.2.3":{"name":"ng-lazyload-image","version":"3.2.3","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.2.3","_npmVersion":"5.2.0","_nodeVersion":"8.1.3","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-YY+MECatqmSjQOQDg3qjMWzBT+1oUlLFAunSrBeU0WcfyIFqS2xwjSzSgemqETy2f8irXtBLEUy3zMOiJI+lhg==","shasum":"7a281f51848d2e4e6052baf35b2130015c9256b5","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.2.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDTCKUvyr/EcCqupGsLbjhRZoLW1a9ZrGI6yFl8ATQxAiA01OKZy9xJBuqFWWF7Dp0QvlnLrqK73SiOHuTNPSONxA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.2.3.tgz_1502643815295_0.1301549265626818"},"directories":{}},"3.3.0":{"name":"ng-lazyload-image","version":"3.3.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.0","_npmVersion":"5.3.0","_nodeVersion":"8.4.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-4bcS6gAuY83J3dZwAYZMk04rqr/Ms15apMvYSkrn3MffgGuGhYbzi+uEB68pS9L8ha3IACXh6v6PWM4IeOTDog==","shasum":"83bf48b5ba6b4ef0f5fa695a2d912b010a867215","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQb39nYnTVfiNiGt7PI6B3GHf2YleZ2YM25/P33xarLAIhAKd4KTPcyIJywQufcfOW66SRGt+vy7HjL2NvxkTw/jjh"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.0.tgz_1503134003433_0.647213539108634"},"directories":{}},"3.3.1":{"name":"ng-lazyload-image","version":"3.3.1","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.1","_npmVersion":"5.3.0","_nodeVersion":"8.4.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-rJbMBGjSkisIpqMbGqa9cWRn+CW4z6zB6cEm8mieBWjJ+cIy7C4BFzZ1Mwd7mMSL1UgQS90AYkl24lRSI3vHlQ==","shasum":"34d831b7479a75cfe5cf61949f938fd50acc9b93","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhqSWyG9RDQNGcucW5E0C0O8Yg+1dlVQaHnhIS9KrmNAiBxPLkw2Uhoo0pEpyBkq/nKWsKPOzLqQX3jNehhHz/Irg=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.1.tgz_1503134546132_0.7078657392412424"},"directories":{}},"3.3.2":{"name":"ng-lazyload-image","version":"3.3.2","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.2","_npmVersion":"5.2.0","_nodeVersion":"8.1.3","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-gMAXZ2FWBgnOJqbMx7u8gIKzhYT+qGwyQXx583cXhgDX5iUFsQeCgSb5AkdS7j0dCcQdifnePucBaGEK8aLxIg==","shasum":"d1023ae91d1a1985d4c1d429a00f7d4ac1c8ed96","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB74+pTbV83Y94O1E/NKTPFiFC9qlslJRJtw4mQu8WCcAiByE4Lw9amM0Q4VQKDIwSU+/mAqRhY/r8deV26umvAT8A=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.2.tgz_1504788140406_0.4974394750315696"},"directories":{}},"3.3.3":{"name":"ng-lazyload-image","version":"3.3.3","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.3","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-YpEph2rZShTOuhKfUY/NMNUnqk9NoCiG9gjsj3AYyhWAXZ4DEjOkBWkXFGnTfP9BWuuWksdWd/gUq5uDbAZ4sA==","shasum":"882b283ff8a474c03e1ec1fc0c9808884a846d0e","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKMYXK7K/wfkBCjiRLASi+xxJEnaRR8F6d61yFkWSwyAiAXiF6yBeY+QL52GpHgL+YTQ8/ryxMW3WT0RprPzgwRdA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.3.tgz_1506691419245_0.8230596196372062"},"directories":{}},"3.3.4":{"name":"ng-lazyload-image","version":"3.3.4","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.4","_npmVersion":"5.5.1","_nodeVersion":"8.6.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-M6FGmXXGedZOoGX4DQkU0tVkudk6ijvbmEGknE364gDW4zp5ypEn09QL0tnTIsa9XC4I9ZTSwPxpnOB5fn7EZQ==","shasum":"f3484ca16a52cb37d9b0a641c80d8b66b29f8739","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJg+sRvZJypoKNxQCxmBDX8yna782R2b8bCqI6dtMYJAiBzHxfNCBVYrlVjxLHzHVeQ/A9pkgEI3mnGFz8pbWlMDw=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.4.tgz_1509903094710_0.13718828582204878"},"directories":{}},"3.3.5":{"name":"ng-lazyload-image","version":"3.3.5","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.5","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-l0j1l28x6XYKs2dir43XCYy4HYU0cgBdkyuNc2mK/vFvc+RBE3MTd3H3uEa3wX0Y6U9y/pGsKmLuOoHcDxcQ7A==","shasum":"41f3989e40015e777d001412ce0b0d0ab3c63923","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWE3gMdfYXqOFSlF3uD9iDse9OPxWn2LHn3yel03SqSAiB4sc5YcQxjLwsOOFspVOSoZjimtB8+kZTlvU5y/M6F3w=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.5.tgz_1510499745763_0.33706875098869205"},"directories":{}},"3.3.6":{"name":"ng-lazyload-image","version":"3.3.6","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.3.6","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-DcirRx2CsfBTvnei0Azv/r9RE3HA0GKeDb2gvPGUDX/iBTvTaRVwx8uIzx3PyyJv4MFHS+P18QGqWriTiIgDSQ==","shasum":"436c6facaef6361bf2eefe35252b0a0f535340c5","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.3.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx8z/Fr2hwIyFLZaUjnRFqweZIvUGahm9gTFZiDBGByAIgKeyJIn1QJpSkUvHHYQfLNVsao6FEfxSoKLnsZFHsgnk="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.3.6.tgz_1512239680342_0.7516361752059311"},"directories":{}},"3.4.0":{"name":"ng-lazyload-image","version":"3.4.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.4.0","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-Po43PFxtMFvukyWcSEDMvJfN0RNn3WbKre8MNcYaCpxqvMLQRT2V9r8Tyhjf483mo98isTZEvvNFqQr/+YmLQQ==","shasum":"a2f5a4b97874a30ec4d005218898c170c0f2e332","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.4.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYc7ldTVKWp0XTVqlRbaL0Mb4edMeMkyQTVgxKaXbVIwIgSsjv0tTMDe7qjf+bQ1Ib7ZF+I/CCjt2l4N8ZKdjIUYE="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.4.0.tgz_1514802901500_0.4511432240251452"},"directories":{}},"3.4.1":{"name":"ng-lazyload-image","version":"3.4.1","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.4.1","_npmVersion":"5.6.0","_nodeVersion":"8.7.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-1NH0oLTBAzxn/n6LCIpJe3cFcSf7qU7cvdb/rl/Io9dhACY3BWfxXFv3JKCjqzH6fjQnB57V1jwVcuxSKtGqxg==","shasum":"c365653e4bc8c0690b2f560cc4f38de032497c4f","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.4.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDr81xQPP/l3kx50WgGUlgMJZUppa5/XqwsaiA1h8TL6AiANtbBjQTek8uxRx+dQegu0ZeM+DS3N/yK8pmhuTE9Nsg=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.4.1.tgz_1515315016878_0.33818779001012444"},"directories":{}},"3.4.2":{"name":"ng-lazyload-image","version":"3.4.2","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=2.0.0","rxjs":">=5.0.0"},"_id":"ng-lazyload-image@3.4.2","_npmVersion":"5.6.0","_nodeVersion":"8.7.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-Cukdq+lSDzWfvMAAvbi6aDv4cCJWX0dwqDJUZ5LmEUGHA+9+ajGInQ/lbxH1UsPgVo+pL4LvjJrJoHPq4S6aIQ==","shasum":"0654d750185105045111b089a3f9ee2d3044f1bc","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-3.4.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnUrTd552wSkSYcgUTd20QyGiEjsM1xzkVrlQQR6nKlAiAMqoryIYJAki0qr4gPdGqHp9lpXKUehCJJePEsXnCnBw=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image-3.4.2.tgz_1515529032690_0.6952430491801351"},"directories":{}},"4.0.0":{"name":"ng-lazyload-image","version":"4.0.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"_id":"ng-lazyload-image@4.0.0","_npmVersion":"6.0.0","_nodeVersion":"9.9.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-D2d+kfVRoapP1arFnResQGcQgYs2zrMmQTY46kBeuCvXYOvnZFCTZDItW/ub7UDcaUgRtT1yQbeqy3mmqb+ssg==","shasum":"2d0cf0f95c66417c14c2c27211a879820bae71b3","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-4.0.0.tgz","fileCount":47,"unpackedSize":54070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbAFlTCRA9TVsSAnZWagAAC+EP/2bwWXNoNeqMl6DXrm57\nJW9LM8V4WVQOMR8PXYQVpnkwWHICfUH0wwC0enCOcsgq0tKwmjIDWoGRuoZm\nkFINA9XZKU9P27hWHmGjxW54zPDPRJ7hog5f/WIk2KRVpYJrLcP2DIGbvf8k\n0xnw71XNklijJ6FPutlt6tG/WzChsz1X9JE0iKn2d0X+ZiA8bICZCfoatHoY\nei+iBOUiyiOQR/oUu0j9ZDkU/cdJnk3i40Vls+8E2KfxgnGQKS3NBOSwzmqt\n71IRuuZGOLOotBYZUzpwVIS2JQy/BzKUbscqPN36dpDOS34ydMoCjAXQPl37\nngfl59Wq7u/favyttYBEpueV+gS1rbf7jIZ/etPp6a1nM1m5L2veBdQDPb3Z\nThmAcptkA0Lp+b60o9tvfazn+SdlI/SGJzlJvEF36FMq6MEbxUzVHMlQhaV+\nO14sDTCtmAJ7VxeMLBwxr1ycEtmHLis4k1l2GOxG4r99Ohi0PF6o3K4DMy7U\ngA4JzNU9z68GkPyUjpYWVYlpps/Ig2lnaW1u6YDv15+Ej2aHm3RR8ATBSiPz\nRCuH+4A77NHNh5jtcZ7OR7IftAaOUP3pIlCXUejsM0GcVxIo6O6GSbBYzSuD\nizDzC8B91tc0/y1jjy6mUyaIpfe7DpZbdXRosfJxp0HU5v3q6ElnO9g35WMT\npeJs\r\n=WUbW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsiLtHP4DquDYEGOx6zWGmzn7Fs3SvlosCxeWWHkjrTAiEA2GMNuR1eGSbPzf62+FP5VcBD/KBr2+xpOlceBmwUSzo="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_4.0.0_1526749522053_0.020546576255451532"},"_hasShrinkwrap":false},"4.1.0-beta.0":{"name":"ng-lazyload-image","version":"4.1.0-beta.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill \n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nfunction isVisible({ event, element, scrollContainer, offset }) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }) {\n return imagePath; \n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nfunction setLoadedImage({ element, imagePath, useSrcset }) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@4.1.0-beta.0","_npmVersion":"6.4.1","_nodeVersion":"11.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-Kvqk+ZtqaNpsRj1nA7qI2bJ1wZ2rBZ3L4hTALuWvAuGsYoZ7mR82l/Nz2VlbWDb8D4PgObKCRvEkeMcmk6hEqQ==","shasum":"6a4f4c8d6cbdf477960c84951f24c1266efae847","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-4.1.0-beta.0.tgz","fileCount":116,"unpackedSize":145657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb3CIICRA9TVsSAnZWagAAls4P/iRNk9st+bre00yoNEyH\ninH0JcG+sffsBPeIPSZ5VPkbkQzmMqmyr3eJftDxmlD5tXbQe6DM4irsOHXb\np0wRKWeVxNUkRUeWxDzK1ARaIJa6exltvR4PNEvtNSgoHAsn+1jAoXn8ZdiS\nMGvohP94LTOqMVxbHuJWkyoIgiPTZP7ayhP51rOAXeiaE/aT2B6B3a4ITtGE\ntXiRoj9dEfNMZS35nmaHdSMZv5g4D1Or0UnKMclHNebsNKGGdD5WlDzgT4fc\nBgk74GicUv5wJHmqvPPhumhoP76E/4igIF9XwKE+eZrT4XGRpopQYbmQz9/X\nj7o3Y0TGAZCO39kqby5DM4R1Skgqw6zfGgHHhWCOv9D35sVaC4GkNIgOI9SG\nS2WUsrf9GqWpQLBtE7GAh4q/QLP4T+nr26AI1NGfZVwDinZo56HLVoSNOfid\nsxVuBagcNw+gO43n+sUnrH2e+w0lDrRPhyWR4MGIBE4B00QqcEfmHw/VQPqf\n8mk0HUmrUkezggBOe9+RgeiMe9dfllPZ/yf9itbS4ZG1Xe6dFWWga5CVOnmm\nx2Nse6NDq9RHkJCrFpdrcEPWn97wp7lU/SOBiQbITOlQmN+djv8rBbszWlRa\nBp6aNLZOsBCZnV747yiseZABMWevPo9Gt3ILG2QpGLb4l42bBopxB4wEj/9W\nTr3s\r\n=FxtI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDPtWijVZWZSmcgGZmRwBGp8koikcijbMieUT3JIOrsgIhAPw6OU+13j8OEmd+gaO1mGqBIA96WcTaBB9vgqrxTNMS"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_4.1.0-beta.0_1541153288355_0.8693965862544903"},"_hasShrinkwrap":false},"4.1.0":{"name":"ng-lazyload-image","version":"4.1.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"_id":"ng-lazyload-image@4.1.0","_npmVersion":"6.4.1","_nodeVersion":"11.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-ym7B/WFlXl8ezTWktETm8PSsjDYOdh7FKB4jks9sf2vYpJeUc851H4GGZXnhUFt8RY2OL0jRzKVf5HWrP0BP+w==","shasum":"cb780fa0d8fc89240cbbee9eea631e160d9c08f9","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-4.1.0.tgz","fileCount":116,"unpackedSize":145581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4raUCRA9TVsSAnZWagAAji0QAKSvzTsnjj27KQq8az5m\n09M9WAcuyVdjcIRYoBXXX3zTOyF/P1PUjr9ykRvv7VW1eta1jJ3pXe1dsFXV\nCWgXmwldeGnSzWsVIvihh21nZRtThQnDdlufy4dDXgkRXd7E/r1JJEl89/Ce\nHiAjL0+Pa9drOcOrKmJUrcI8RrPFl9IFZ2f0iSGw5SK6kvaaA43md8+qZmMy\nbkwbhoo3o6UPS/+cN7zLEdhmVluop4X6DsuxEnowf1jbK9JmtJ4CaPLxbUUg\nctUKy06rbCFkx52HMaYSExckoSAEh9lVuv4VB1e1vowRDI3KvmbGBF0EilS1\n+yPIKhGDirc+Q2lQnXYrYrAVd6lYwytAcXq0LUdpPpCnF1z+xnAqfFKmpPvV\nQYuNX5aWx6ZpYnpb4KyN19Z3GusXUYo5RT+WShK1M6VdFB42v/nu+uSbVShu\n9HTRxNcMPWmiIfduQeoxafi7FwKzyjEPMBrXVdeN7jwYAwNusqtbwsMDRFJf\noVY0lte5PUw7QdOdaDZjOHNSI6EhZfs1K1Pw7kKJedu7dEQ4zvDf2pMm/8UC\n6D4owniFhMFBC1JrDTIlLJc+NjxeEK5QFP4fqOWXwt1rcd0v/ExIGTD/e+ko\nSiHMm8Z+M/PuteVn+F/dko25ckTWq2mcHa9isgWwi4am9+TGrc2Dlbgsh2Ov\nScD3\r\n=v2xJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlN4TW/fPadxa2YSWE7IZlCDCMtK48kk+IhA91hprCdAIhAKnjXGJc4Y/GfVOv/dozrwSHt9WcUHFwhQMys00Lgex9"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_4.1.0_1541584531918_0.23292291474598192"},"_hasShrinkwrap":false},"5.0.0-beta.0":{"name":"ng-lazyload-image","version":"5.0.0-beta.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill \n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nfunction isVisible({ event, element, scrollContainer, offset }) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }) {\n return imagePath; \n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nfunction setLoadedImage({ element, imagePath, useSrcset }) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@5.0.0-beta.0","_npmVersion":"6.4.1","_nodeVersion":"11.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-y58drdUbzQuJyz+xaxAQVIH1nSWI1TDv2X3SZ0naxDr8wJyPq7Ro6dnl//g3f9ZS6RyFzZ/MjvjMtzv8C91Vmw==","shasum":"6fc1c2d22f480cf0efef0faf588e55a90dd5ca3d","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-5.0.0-beta.0.tgz","fileCount":116,"unpackedSize":142495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4sIDCRA9TVsSAnZWagAA3f0P/0/qdHQ6m+rMpAULyQzO\noNU7ShkSnjtPWg86LU6OiRU7Md9SL+ZN/xETsNdFAyBwLwyU6StMokJRtWjk\nf0viFjt/Q4lViGgNhuHDjxrUD0r3AF7T8FX96lgOn1n9gjLDhWMAvYvNUSET\nBfKHqUrbEMffWhfqIeZ83pHTQtRBVWBVPj0hy5dg88hc9u6yGEIOfscUOotI\nmssYqxNDUBV6Qimia7IGDfvk5/TbtOn9fAKX7542cXHO3qYuGFauLwTQ+0N4\na9ithlbWUQCddW4V3voTf4v2pJQOaXwG5G00+Lyyc+bHWI0hCVsArCB25mTG\nAbTTCoR1i/6csqNB9+yb4JFmapLbpkA4RfFicKSJTF9LFexFuuCj4nUks6GE\nMBRGBlf8RDXZRlaO6PeTynUB1kBDRKqZS+jLlj9ychjwc/LiqCAUiRgdaAcT\nxmr7mhxSx8Y0+Wsi/sJzGqFtqNnfanj5wi6XgXPiyCo9o/SZARMor260lb7w\nB8T1yL2sSNo5jH5Sl+c67sV6yBWIkTgxiqNfXGOGUQU+g4RGZ3YRz6Pdgcw7\n19MRWBQG/waeDPlrIBJGClaoHQq/KgXkT0aZE4RtCD7/WA1mzojqxWhBvUcH\nRqjfCy4/9SvVZ6laJ4Y5BQpGHhJYMop/MzsY+E5SUunKGXPE4h51EkbIlJU6\njsjn\r\n=bxIk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdzCpVMUecHRnl4jO51V5VgL23gY0qETRI68GXH7HD/AiBY5JsDVFDpaO4NyHheSQ7CyBf7ZmQapMlJK1Uq9Qhj4w=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_5.0.0-beta.0_1541587459353_0.7677708741721401"},"_hasShrinkwrap":false},"5.0.0":{"name":"ng-lazyload-image","version":"5.0.0","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"_id":"ng-lazyload-image@5.0.0","_npmVersion":"6.4.1","_nodeVersion":"11.0.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-3EGTO2Evd28NLFioDXfKBWqwCdtciV3klMuUW3e6r2kctvbrZ5jQV7uzwNKoK53j88mD2O2BAojoQ6Otd6Gt0A==","shasum":"b2ba9ca27eb4b8a4a3603878d8f7e289ce774156","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-5.0.0.tgz","fileCount":116,"unpackedSize":142488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4tL6CRA9TVsSAnZWagAAutoP/itEra5BqXYQ1ygO1y0C\ntSBIkcfruizs0JVO6C8CWcTH+fGuPgDkVv9PQ4uRRxT37Hz7BvNkA1CCqOr5\ntUnSIh9PgB21/zZ/rZjFG6v6Uky1N1QMOPnFru6jEmkd2EFKC8zFdgXpkX8m\nv56yTTZCLIo7n6MzxyQW8SuWe0gJp1CK6VEJl8MyRd7bHSZQ5W/y5v0DTRxU\nB7uygsva7sDrjz5Qw9Xx2jFha56SXFPVLby1FvYBunt8uq7LS4ltjaICpQzr\nEen80buSCc8DMR8MO3aYJRAmqRskDzunCEHFGH/Qn1rZopner4yEypUjHkif\nmRca0iCCYF2c2KT6u11KOjoQgQRty7NzP5E0AgPLrU7pNRNcfwEEkr2xW2Eg\nafjnIlyyLwRNRejWQtt4jybbqzSlMOPP/dDhgdlAWGc9cmXt66b9/by7CL14\n4iDbXvYyUlfOx9vRravXKXCX3jDZ+NSLAYUrePJPFr+xBE0kNP+jb6/tWbgX\nsHg3r8yaugqCd7brctaqHuOaQ6c3mibYUVoqvDr9J6B4hEfdeimP8PvZiVFY\npKLvn55xakPHLO/iPiw5saKoq08i3wuFl/cK8z7CucSzqBu7NFk5YMKuB+Ls\nPEjhLcA/ao777lYk8sn3fua+j7eAYS6IO94xsqBn3godSHkeUKWSPI2zN754\nXwvT\r\n=e3uk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2OUe6yYZffelkPUfzNs5qF7nWr6WVQrwLGKMO6R96LAiB2h1rdPV1tW9/TUfZAw/Tg3VZlViBthCSy1MygAFNoNQ=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_5.0.0_1541591801276_0.016954710282913954"},"_hasShrinkwrap":false},"4.2.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"4.2.0","description":"Lazy image loader for Angular > v2","main":"index.js","scripts":{"prepare":"npm run build","test":"karma start karma.local.js","test:ci":"karma start karma.ci.js","start":"webpack-dev-server --progress --profile --colors --watch","build":"ng-packagr -p package.json","build:example":"rimraf example-dist && webpack --config webpack.prod.config.js --profile && rimraf example-dist/example example-dist/src && copyfiles -u 1 example/style.css example/index.html example-dist","e2e":"protractor","e2e:ci":"protractor protractor.ci.conf.js","webdriver:update":"webdriver-manager update","webdriver:start":"webdriver-manager start","e2e:debug":"protractor --elementExplorer"},"ngPackage":{"lib":{"entryFile":"index.ts"}},"repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"dependencies":{},"devDependencies":{"@angular/animations":"^6.0.2","@angular/common":"^6.0.2","@angular/compiler":"^6.0.2","@angular/compiler-cli":"^6.0.2","@angular/core":"^6.0.2","@angular/platform-browser":"^6.0.2","@angular/platform-browser-dynamic":"^6.0.2","@angular/platform-server":"^6.0.2","@angular/router":"^6.0.2","@tjoskar/assert":"^1.0.0","@types/core-js":"^0.9.46","@types/mocha":"^5.2.5","@types/node":"^10.1.2","awesome-typescript-loader":"^5.0.0","copyfiles":"^2.1.0","core-js":"^2.5.6","electron":"^3.0.7","karma":"^3.1.1","karma-electron-launcher":"^0.2.0","karma-mocha":"^1.1.1","karma-sauce-launcher":"^1.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","lodash.isequal":"^4.5.0","marble-test":"^3.0.0","mocha":"^5.2.0","ng-packagr":"^4.7.1","null-loader":"^0.1.1","protractor":"^5.4.1","rimraf":"^2.6.1","rxjs":"6.1.0","simple-spy":"^2.1.1","source-map-loader":"^0.2.4","typescript":"2.7.2","wallaby-webpack":"^3.9.13","webpack":"^4.23.1","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","zone.js":"^0.8.26"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill \n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nfunction isVisible({ event, element, scrollContainer, offset }) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }) {\n return imagePath; \n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nfunction setLoadedImage({ element, imagePath, useSrcset }) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","gitHead":"66fa16e0212d01eb7f014759e383f097dee7bde2","_id":"ng-lazyload-image@4.2.0","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-g3kpogUBpBsdDlWqPGVkJQOokicLvR6xRildC1KCJug06lW52cgw0zn6BuOdH/RPsspFb4MyOQ4ua4Kbv3tkWw==","shasum":"c02d8840831659a6ceeadb7728de2edd24662dbc","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-4.2.0.tgz","fileCount":95,"unpackedSize":8747249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdrMqCRA9TVsSAnZWagAAWbgP/2Kh06hk+2KIlMc9ZFpw\nuxcT1x1VocdzTqqSM86JJhpcv1zpa8e5hu7/h7JA0nMLcDLxyLWXOtUzT731\ncGxuVzOiyz09owkkUvilbUiO/c1iXO3w6eAN1Wr4+IteuXH3UnIXu/hiS53m\ndY4NjsMFAxNnwwzvOA1RIiFswlv/r6Ev0SLsBgWG0Hw0Q3mVfOM3Qy2glXMy\n9RFQfomrKuzhfPJU3FU5NivB6Xm3TuDQ48MqQ7qeF+Jw8stQrNiPOIA19Pzw\n1aDLfukWXunEBbnmdRKF9pDh95GqMJ4UHDkLbOLoIWMqI2uhsgxbN4l6envh\nuDLvIxPvCU1QFfB5E7M1Mne9GRgVstgEMI16DTV1PNUVqzD+RV6P/zUiktqJ\nTgUdMCCAm3KJ8fDNPLfefrWvDcCJjz5GTTeYH9/Y1f2x8sZlCEojZxMX715d\nPsXN8RbsRFBnTmfT4uw06Hn0Trf3jqlBkq/1v+2OI5H4k+VncqMMnSarOYuQ\nTpaQe+COrjC/8cHS6wH0llKOIVRJCYRpk2SwyZ4PThKKQgN1z8HK/ljPTLFM\nNA4NM6GnTYgZZW5XJ/BztXszamfOLaqT0zlYx37keffMXe1VRBb6ONETuj4G\nQOdANmPlwSVVdtFHlX1U0380ChDtrrvGmQsrEdERI4/fL+tF0eJxed3m7B5U\nbQ/W\r\n=Te8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVGF25YqBE3Tb7xcq9C0IOXqXVzt79cK9+mHviitc6cQIgL16Hw8sY4uflluHkQg9DSRmRLQO7nBZw9UUlHiVt+Wk="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_4.2.0_1551282985736_0.602468010694051"},"_hasShrinkwrap":false},"5.1.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"5.1.0","description":"Lazy image loader for Angular > v2","main":"index.js","scripts":{"prepare":"npm run build","test":"karma start karma.local.js","test:ci":"karma start karma.ci.js","start":"webpack-dev-server --progress --profile --colors --watch","build":"ng-packagr -p package.json","build:example":"rimraf example-dist && webpack --config webpack.prod.config.js --profile && rimraf example-dist/example example-dist/src && copyfiles -u 1 example/style.css example/index.html example-dist","e2e":"protractor","e2e:ci":"protractor protractor.ci.conf.js","webdriver:update":"webdriver-manager update","webdriver:start":"webdriver-manager start","e2e:debug":"protractor --elementExplorer"},"ngPackage":{"lib":{"entryFile":"index.ts"}},"repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"dependencies":{},"devDependencies":{"@angular/animations":"^6.0.2","@angular/common":"^6.0.2","@angular/compiler":"^6.0.2","@angular/compiler-cli":"^6.0.2","@angular/core":"^6.0.2","@angular/platform-browser":"^6.0.2","@angular/platform-browser-dynamic":"^6.0.2","@angular/platform-server":"^6.0.2","@angular/router":"^6.0.2","@tjoskar/assert":"^1.0.0","@types/core-js":"^0.9.46","@types/mocha":"^5.2.5","@types/node":"^10.1.2","awesome-typescript-loader":"^5.0.0","copyfiles":"^2.1.0","core-js":"^2.5.6","electron":"^3.0.7","karma":"^3.1.1","karma-electron-launcher":"^0.2.0","karma-mocha":"^1.1.1","karma-sauce-launcher":"^1.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","lodash.isequal":"^4.5.0","marble-test":"^3.0.0","mocha":"^5.2.0","ng-packagr":"^4.7.1","null-loader":"^0.1.1","protractor":"^5.4.1","rimraf":"^2.6.1","rxjs":"6.1.0","simple-spy":"^2.1.1","source-map-loader":"^0.2.4","typescript":"2.7.2","wallaby-webpack":"^3.9.13","webpack":"^4.23.1","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","zone.js":"^0.8.26"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill \n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nfunction isVisible({ event, element, scrollContainer, offset }) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }) {\n return imagePath; \n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nfunction setLoadedImage({ element, imagePath, useSrcset }) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","gitHead":"3ec60f6b94f378f8ff33ad528f3f3445db0a181e","_id":"ng-lazyload-image@5.1.0","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-i2rEzJRi6O2TyqGajioMf5QqKF1YJq8x9fBe9ScRf9ZUCiL3cc1ve+Mc7ef5Ngr7yDqawaPAn6drya6bljIkyQ==","shasum":"849c57359ac15c6ee9e367235b016b9a7c46e493","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-5.1.0.tgz","fileCount":95,"unpackedSize":8747419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdrRQCRA9TVsSAnZWagAA130P/1vvX1vUeNcZWnDfukBI\nWzyqmFQ1KY3Qfw1GA/Jylm8dAX+qexrEbk0M8vUVt5IoNJgkAreTg27SVChe\nX0xxTN7oz224gpNswMui04r/Dh5lZBIbvAakMaoROpDbiQunFOjuyxysbhha\nNNr6IEyjzYNlt1V4E0r71+u4RaUCXluBswTUW/UZzbUyZ92Rg2z539N8ydXD\nEutQmzXICeCDEUYuCk5KjpJy8rNj42hn72a+j8Aak3n67kTi+g9yhu2F3Xpl\n4utepUtkKZXbwydRIY5v9Pr2cWzC4GkeXg5XPjOQ6Y81nHzKjCBG9i89s+3q\nBGdFvEFunzdR8L6BC2wX94RQn1JIuSZpA6fXPDiImft3egPiVEZeBPyRA1jc\nU1K6suSj72aYt2Q74YDMMF8vUluljkrA6UUSsFsvJ8e45+E9zoZYlQv2WfKu\n+h3K81UolMAP/BKKo9wrXq3DNNF2kLXoi5bMpBGGBcA2LEaCYtWn67dSgtsF\n/3wFqj1TRnBevdee2k6NcPAxkWCoDln5yi3OHo1p1TYdca6l/ufhy38Us0vm\nK/hWjdACfgrYsM/9uHrvbgU2IoPpWya08sZGiFcKWmiZHPG8baJeoU7h04RF\nyyHc6pfaaLUPz+v6N1IGY3vDnvEG566q3Pf86lzMDm976PXcViegDwo50eZ3\nvI/N\r\n=hNvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1JOJeqCjXVf8jRGBbH5JSRA1/IMPJGigxlBA/GA9n0AiEA8kEgNH/YACJJNaaSklXwtda2Jp+TvwdtMgHPnx3GFyE="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_5.1.0_1551283279508_0.09363203195000436"},"_hasShrinkwrap":false},"5.1.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"5.1.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/animations":"^6.0.2","@angular/common":"^6.0.2","@angular/compiler":"^6.0.2","@angular/compiler-cli":"^6.0.2","@angular/core":"^6.0.2","@angular/platform-browser":"^6.0.2","@angular/platform-browser-dynamic":"^6.0.2","@angular/platform-server":"^6.0.2","@angular/router":"^6.0.2","@tjoskar/assert":"^1.0.0","@types/core-js":"^0.9.46","@types/mocha":"^5.2.5","@types/node":"^10.1.2","awesome-typescript-loader":"^5.0.0","copyfiles":"^2.1.0","core-js":"^2.5.6","electron":"^3.0.7","karma":"^3.1.1","karma-electron-launcher":"^0.2.0","karma-mocha":"^1.1.1","karma-sauce-launcher":"^1.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","lodash.isequal":"^4.5.0","marble-test":"^3.0.0","mocha":"^5.2.0","ng-packagr":"^4.7.1","null-loader":"^0.1.1","protractor":"^5.4.1","rimraf":"^2.6.1","rxjs":"6.1.0","simple-spy":"^2.1.1","source-map-loader":"^0.2.4","typescript":"2.7.2","wallaby-webpack":"^3.9.13","webpack":"^4.23.1","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","zone.js":"^0.8.26"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill \n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nfunction isVisible({ event, element, scrollContainer, offset }) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nfunction loadImage({ imagePath }) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }) {\n return imagePath; \n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nfunction setLoadedImage({ element, imagePath, useSrcset }) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nfunction setErrorImage({ element, errorImagePath, useSrcset }) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@5.1.1","_npmVersion":"6.5.0","_nodeVersion":"11.6.0","_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"dist":{"integrity":"sha512-j3V7oBCBOJay8OfhFlFfW618YTQ9RscNKd8DI7ryveaE389Sd4R0r0RCKU3i5KmCKBtWBJE7vqd2c0hRpAYfIQ==","shasum":"53877155390397ed655a700b66335df1c82bc2a5","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-5.1.1.tgz","fileCount":67,"unpackedSize":352409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcf8nNCRA9TVsSAnZWagAAGdMP/0d8ZTUm5110j1JQAj6L\n/l4NragGFKHJYUc4Gcyvo5HgAHjBe7zHh9qnVABKDzOQYx4KM4L8WbXg1u+B\ngmu+gO7KNaYhw1BmckmD6JrKLwB28AFdfGNGFUr414HorzB9RIOXyCPgEe5k\nlxzfOd4lkRsV2DA8H4W6OwCcNlfwLmPS90uqLOjLMbwN/a1ZVq2a2HIP19CW\nnpGrQB6JpZp0+NqAVHPtTYRG6NOATiIIH8Sl43MnUFO5FJtjk0Pjjlkx9jlX\n5b1cHRS6CkHtdSZwj2kPk/s0AQDS08PrQ8kL2eie5payJNwGNgumRltMZf5C\n/4wxJ4yumYmCG55O5t3ait1A9En5Zhs0lgFImM/ZfwGArMGuni1e8Kl5Ay5W\nfKMngJ3D9hBgSdd/weWZ1lIA9C0cXC6WWpBCJfgjycFiKynBCCyGiqwYjhiz\nFXc9t2h+BOeVNedtP+Q0HrjGXf2Eu3d7bn0Uju0coAM2oAGcJqWAevFCbeDm\nklaf/INAeNCoa6s56J/h9g7MY5bJsSJfgvNUt+1+hgzrVUdQe2iEJa69A1PT\n2easyJ4a9RX1kL2sIfF4uyi63mMAnXmzHGRXohcaRDiQNGV3LroZEavvc7A2\nXtKcwJrRzYM/eXzvV4eYaDhOW8Ki+aF48eDx0pxcAsIQ7ZxJaCBbRAn8zu00\nQCDu\r\n=XyjL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+KExaEMm0JiWqEOyUYQ+/oD0+487WstEXfNKMHVdnqgIhAI1PYyDIdrzCrvqUYjrLEKChlttHvUi8xJAa0QUlt0u6"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_5.1.1_1551878604964_0.4927518010884162"},"_hasShrinkwrap":false},"5.1.2":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"5.1.2","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=6.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/animations":"^6.0.2","@angular/common":"^6.0.2","@angular/compiler":"^6.0.2","@angular/compiler-cli":"^6.0.2","@angular/core":"^6.0.2","@angular/platform-browser":"^6.0.2","@angular/platform-browser-dynamic":"^6.0.2","@angular/platform-server":"^6.0.2","@angular/router":"^6.0.2","@tjoskar/assert":"^1.0.0","@types/core-js":"^0.9.46","@types/mocha":"^5.2.5","@types/node":"^10.1.2","awesome-typescript-loader":"^5.0.0","copyfiles":"^2.1.0","core-js":"^2.5.6","electron":"^3.0.7","karma":"^3.1.1","karma-electron-launcher":"^0.2.0","karma-mocha":"^1.1.1","karma-sauce-launcher":"^1.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","lodash.isequal":"^4.5.0","marble-test":"^3.0.0","mocha":"^5.2.0","ng-packagr":"^4.7.1","null-loader":"^0.1.1","protractor":"^5.4.1","rimraf":"^2.6.1","rxjs":"6.1.0","simple-spy":"^2.1.1","source-map-loader":"^0.2.4","typescript":"2.7.2","wallaby-webpack":"^3.9.13","webpack":"^4.23.1","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","zone.js":"^0.8.26"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@5.1.2","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-kGiCYTiLEFkhqHr3ygy5+ZYB7MAcEkWIYp6MGJEXZYVJlySmDBXQxLjg+pBwAPl9VFyDcTfYlaKiKmGSfEM+ww==","shasum":"7ae79ced721b17a8de9e84fd0e56414f5c82b8a3","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-5.1.2.tgz","fileCount":67,"unpackedSize":355280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpFavCRA9TVsSAnZWagAAJKUQAJ/5Cpto5CsBSfX8zDE9\na5pGe2RiKA9fjTWGeGHmeFic3TNK4VljKXpRRAjLnkHgxGowFFuJv1NwVlIq\nWBPL5NM10OWYpGXjJvQQpvw/e9JIvFFs4rhlRPw0beBEx419LwH6YNYl2Sn5\n30btg7okSBeCiDqt37dx345/rLZ9z1zY8pBd50BYFg25A8ukzlPdPB53NkQJ\nRVHRtzR5IH/Ni/uBWi/q3NF4Puj940/Q86FF00vUPixl8kU9YnnHOeqUi6Vs\nR4M26z6jymokWTI+jVbJKHnUNmWSC1j5Ux3AXs7tQ+FP/ozK3k5HaWCTIxLb\nMSEnbemVkHRXlEz600W/Wu4c7MvdSeb+mzUijkRujrSX7/uXmHNPXRLYh9YP\nSx1yeGTl5mZWpwJMfyULRU2mXeq3nSTNF+jSjvzgVd5X6mhwvlUKOa0zjIvZ\nfm1+wvPxBpUNNr9YS3/YZ0y7cSL1JR4HYeVe2L7buuj6hmb/lms4MzRy3veK\nShbqoJ+srVdJsaMdat//hEloiVQhsBG/fhXYqWGwuKJ0c4zHxAGjm99YNxL8\nAgCajTXqUYfxlC9s8UQ5hUoz8U00C0YDQJb/d/JBAKiErgjTeOZyPvcMO5Mh\nkc9zFMHfrqpbURh/gyhz7qy7rxYMCw99b8KcgrtcfcART4HtOWd7kBRuE/xA\nSnEY\r\n=+QHx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvhLbazUgsII0Oa5ZrmfwjIrLP72rHR/oOs5P3vVbGwgIgI1BJRMzlOwlJuayNlqyRJc/Bvi9PEfyKXBM+Pkz//G4="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_5.1.2_1554273966965_0.07334377378029844"},"_hasShrinkwrap":false},"6.0.0-0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"6.0.0-0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/compiler":"^8.0.3","@angular/compiler-cli":"^8.0.3","@angular/core":"^8.0.3","@types/jest":"^24.0.15","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.3.0","rxjs":"^6.5.2","simple-spy":"^3.0.0","ts-jest":"^24.0.2","typescript":"3.4.5"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"## ng-lazyload-image\n\n> Lazy image loader for Angular ≥ v2\n\n[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()\n\n[![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n\nAbout 150 loc and no dependencies (except for angular and rxjs of course)\n\nDemo: http://tjoskar.github.io/ng-lazyload-image/\n\n### Requirement\nThe browser you targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nIf you want to use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and want to target Safari and/or IE; you need to include a polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill (see [#387](https://github.com/tjoskar/ng-lazyload-image/issues/387))\n\n### Installation\n```\n$ npm install ng-lazyload-image --save\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n`ng-lazyload-image` is using a scroll listener by default but you can use IntersectionObserver if you want instead:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n### Usages\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n offset = 100;\n}\n```\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n offset = 100;\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n offset = 100;\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nSee example folder for more usages.\n\n### Hooks\n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset, LoadImageProps } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }: LoadImageProps) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n#### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n#### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nimport { IsVisibleProps } from 'ng-lazyload-image';\n\nfunction isVisible({ event, element, scrollContainer, offset }: IsVisibleProps) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n#### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { LoadImageProps } from 'ng-lazyload-image';\n\nfunction loadImage({ imagePath }: LoadImageProps) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }: LoadImageProps) {\n return [ imagePath ];\n}\n```\n\n#### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { SetLoadedImageProps } from 'ng-lazyload-image';\n\nfunction setLoadedImage({ element, imagePath, useSrcset }: SetLoadedImageProps) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n#### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { SetErrorImageProps } from 'ng-lazyload-image';\n\nfunction setErrorImage({ element, errorImagePath, useSrcset }: SetErrorImageProps) {\n element.src = errorImagePath;\n}\n```\n\n#### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction setup(atter: Attributes) {\n // Do something\n}\n```\n\n#### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction finally(atter: Attributes) {\n // Do something\n}\n```\n\n#### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n### FAQ\n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n### API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n### Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@6.0.0-0","_nodeVersion":"12.3.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-TS9oUrVs4vpYbAXLzSbOlIf5zK0CkME9aKbxPHP9N8olu02OjPahI1P8L0l9yUKfER/MIMr3R34bSieKx7v5oA==","shasum":"0d6ad9584926bfb8281e2d5c7f95cca03094595f","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-6.0.0-0.tgz","fileCount":66,"unpackedSize":355397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFJK9CRA9TVsSAnZWagAAmMUP/RkAUGAmsQdEklODLAhR\nnoyuBnpSMk8w3Yz6vEswgo6OqjPAbO0t1yObQBPC/1HhEarFhCq2vnm0LfRB\n4kdI4eEWn8ZLEmQQmYxMRzRGr6qu+uAzvZHj4czqYgSfwamgGyMOEv759oWu\ngxKtHp3/k6VLRK7bM4nQcHHBYd1XYTE2GPGUgTONiCHWLf7i8vxTsYEsMu5u\n/zP9nkAud1yFtgDdw6PfQZakOYDdrzmjBffs1yATOq4qfaMu2xv8sHX07D4H\nzgZMESzn/B1eF0rAPV7RW8rj/9vSRB7jEE9es9v1pcGTJwghkBEhbUK/wA0T\nr3GCvEUDWQ0EkXGDlIGeEL5Lwz5UjwWrStIjhYwqHURUDf2qVL6Aem8XsVaN\n3QyMEXRYSHLgCe1cahY5hDuyz+Qh0VZMA95ktml0n49N8lbdXTyRz7DWJBX0\nTz5uq1Dbam3+BYwdZeYE5xvqc11AQ1VMJbKwtRjgyH5WopDpRJVjPphnlbuP\nYpnNyYP8eXIho/OHWHHGaBH41pAV9VCMG+eeVbD17bq+2E84SwlvBgtCU8jZ\noAw8D/SJdYjKBwj5lbyRTA2vAl621mzlLo+IIKy2lrDT27//Bw6m3bD7wTsr\n7d7ucpL4rIYbzgMrZvcIrQ3Y/N4JACPFW5qsAPGknIQdEHhg1tmIhrf+KZEc\nw80V\r\n=F3Ms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtw1fZQRVdkyajhcM28lEM5I5+mSBAjiWnRSQ3mtd1qAiBV/RyO5MyCwgfvU9fm3kopNDCdUrQuxE3c3u6oPe/i6w=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_6.0.0-0_1561629372363_0.5243533210241875"},"_hasShrinkwrap":false},"6.0.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"6.0.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/compiler":"^8.0.3","@angular/compiler-cli":"^8.0.3","@angular/core":"^8.0.3","@types/jest":"^24.0.15","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.3.0","rxjs":"^6.5.2","simple-spy":"^3.0.0","ts-jest":"^24.0.2","typescript":"3.4.5"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@6.0.0","_nodeVersion":"12.3.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-oatEf5Aq8abjTMxldSypm863B3BJElefBNnmVPEf09KNdYIm1dSrZP6/70CSsxNUhRYsfR+T9Q1SVPaZkwYZ0w==","shasum":"d70ca6bd767c1ea0c6b80b9266fb47a93bb803da","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-6.0.0.tgz","fileCount":66,"unpackedSize":357368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFKx5CRA9TVsSAnZWagAAv40P/RvfvCPpoRJSt4//63hY\nt6qW5xoL5X9RR/zs1c2oQLfFXNBNwF085U+rVe7v2ya7G5GgGOkn32FHt8oM\nujkQyCPncgB78N7ImJiLVuLS58aouJv+S3XKopa9567zizPi2I26tFVjMSzW\n5f4eh3v+suc31I89l8Hn70j/s4og9hXhBl5MDrtCba78pthu1XyoMCh3if0S\n9aOpy8szom/KkqZMFxgJmleTDNCNZjEEPrxrSuFGKlNy59Xybr1aSBLDIv1N\nsRTQIAWWETF3bZbjglnS6FIJslV+UfSdC55WSWv/R7HQ1/z3M0lLQ6NoVj0c\nY0xutlA960Lt5Rvm6OS4xUJJ8vi4JFHjznBGI4T5ackFy8WlnwNsF59yON4c\nAgOC45aQv2Zo0a/DjVe33F8vP50e+hh3OjKhs0Fg919LUvXTNhgu0mEzNhsD\n0hSLw/MUm04HjZXRTj+mPyXEbXiA2M1aP+BrNWVUiDj7BR8swVzciGocusSh\nY3x27pMGHAzpWkwd2zV6kr09bGBkdjeIiBvEp8oe0d35VvvqQfiswqiEJzIk\njURwZlFNWfTbTOA8YCcUOTYygg4TJnz1+E9hKXsOMJoZTvDuQ3/TFUZiW9/k\nmmEcKn+w/8CZ2CAUsS8IMX5wBV5ERwb/Q6IVU3JxrLQIhooCCeACL/lPNpO8\nB91M\r\n=cEeV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8qQeynJd6uREXKv1hy31Uz28McHRqOkKkGhR3NrtdmAiEAoZNCKqoVYoWynqTyZy+AM8MlozIZbFWB/7dW6fBL6lo="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_6.0.0_1561635960379_0.5773365778572037"},"_hasShrinkwrap":false},"6.1.0-0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"6.1.0-0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/compiler":"^8.0.3","@angular/compiler-cli":"^8.0.3","@angular/core":"^8.0.3","@types/jest":"^24.0.15","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.3.0","rxjs":"^6.5.2","simple-spy":"^3.0.0","ts-jest":"^24.0.2","typescript":"3.4.5"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n [![Status](https://img.shields.io/badge/status-active-success.svg)]()\n ![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n [![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image)\n
\n
\n [![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#setup)\n- [Usages](#usages)\n- [Hooks](#hooks)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://tjoskar.github.io/ng-lazyload-image/fade-in-image\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ], // <-- and include it\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n### Scroll listener\n\n`ng-lazyload-image` is using a scroll listener by default so you dont need to do anything if you want to continue using the scroll as event emitter.\n\n### IntersectionObserver\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\nYou can easily swtich from scroll listener to IntersectionObserver by using the `intersectionObserverPreset`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image'; // <-- include intersectionObserverPreset\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset // <-- tell LazyLoadImage that you want to use IntersectionObserver\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\ndefaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\n### Scroll observable\n\nSometimes you want to get more controll over the scroll event. `scrollObservable` lets you create your own scroll observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic 2 and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🔄 API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### scrollObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset, LoadImageProps } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }: LoadImageProps): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nimport { IsVisibleProps } from 'ng-lazyload-image';\n\nfunction isVisible({ event, element, scrollContainer, offset }: IsVisibleProps) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { LoadImageProps } from 'ng-lazyload-image';\n\nfunction loadImage({ imagePath }: LoadImageProps) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }: LoadImageProps) {\n return [ imagePath ];\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { SetLoadedImageProps } from 'ng-lazyload-image';\n\nfunction setLoadedImage({ element, imagePath, useSrcset }: SetLoadedImageProps) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { SetErrorImageProps } from 'ng-lazyload-image';\n\nfunction setErrorImage({ element, errorImagePath, useSrcset }: SetErrorImageProps) {\n element.src = errorImagePath;\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction setup(atter: Attributes) {\n // Do something\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction finally(atter: Attributes) {\n // Do something\n}\n```\n\n### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `intersectionObserverPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: intersectionObserverPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I'm getting the error: `NullInjectorError: No provider for ElementRef!`\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/390\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n\n\n","readmeFilename":"README.md","_id":"ng-lazyload-image@6.1.0-0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-yiUUtNEAHQaJ7CtbUPSpnq45oXmbeB58zxjpvJhJ2GC1c6NKXZGJf9VIf06JIw8bz5uWVDzVZb5fymN36o8dRA==","shasum":"7ef062e1f7670c57cdc6fd60d1f6d63a47d90156","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-6.1.0-0.tgz","fileCount":66,"unpackedSize":358083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSYYtCRA9TVsSAnZWagAAP4AP/1PEfIQ4LXvRwPL9Nn4v\n07s4Ana/txw0I9T57Uowbe5U1RliGd/JGo9PvIgjNEteRgvzdWSolS0qYA9/\n/Nm8ggibzYU0MdF9UWwuXj7wrEa7+dJGg+bb5tYJ3QvwHQDl9ZOTea0mmkHu\ncXnhm1WKI7Mcho56lu2P+L4wOyDOWKxMBOH2BAS/k2e6VEyXu2+UOjF8/Uj7\nqsheQC14Pn58n3ypD3xq9XRTFcxvHtX/+Og9zwcGLls0DuQgLDFijJbXoV1D\n4a9NK54HXkN+C0aqoS8u/GLcEMYZVNQwfzWUKUyzmE0sld4xFQVZBZ9vCcHX\n9G8rzil+EnNFNJsADgSi9Jhw4XAoBV0nimCbwRd7Gu5YAyn7b8KamskjJ4U8\n9UPFXpXjB1BxAB8KoWr3Df78ptH+yF08AcPzVey6YHlZRre6e9P5JlSI5dzL\nKmd8nBymCxEWobO3S4crUxhRIpcfDQLxERkhwACjQuNXSYzNKF3AEBDXLL0o\nmhW4pH58PVM8mLyTxnZQTgEj3hXXi/aynOxk9bCBYl3z6qw4/MOnzp7GihgS\nS84GilPsTI0rcZ8weXR64JQoK+f/EMgsp6lido8UtgYHVSlwQ7mn42Rrz4AT\nkJ5cPXfeeaGQDEkln1eYm3eEDmGJbL0YdN63QPwdSC4CLaUOMiDCIv1H7at9\n1xKC\r\n=AiJL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAhRhX4iO8NuRGAYbvVpdx2xs0jKvUNBkTgB4DU4uSTgIhALCkz8SRdLmj/bYGEyvsiJ8COzhwVSjIZj0wUyc3QPtb"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_6.1.0-0_1565099565039_0.04254063745930958"},"_hasShrinkwrap":false},"6.1.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"6.1.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/common":"^8.2.0","@angular/compiler":"^8.2.0","@angular/compiler-cli":"^8.2.0","@angular/core":"^8.2.0","@types/jest":"^24.0.17","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.4.3","rxjs":"^6.5.2","simple-spy":"^3.0.1","ts-jest":"^24.0.2","typescript":"3.5.3"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@6.1.0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Ejibt5TGecZXLFTn+rk4liygC9x1fT0wrVXGXkpoTZdUiuK6NqCyApKyJ5kGGh3YBVBHbCl/p06HtRccQtABfg==","shasum":"adb012ca6acb68a0565b38417819259c13669b2a","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-6.1.0.tgz","fileCount":66,"unpackedSize":361259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSpPLCRA9TVsSAnZWagAA1OUP/2w+GVYjmfayih9VxRtk\nv47hfwW0c+qiOzZXjrE4tzQoDFyPvCFFtjzIvMCtoemYRACJrwj6ixvTW+Oi\n6TPIk4P3CsiVGTATx973cwUnyOZPsuMicYU92630gzzjPBritHYHndl+ss7i\nl4FVum9ISJxwh4kN9ZnDBAw6SF9qAcsplDZ6tSaxCemR2Xlzn3Raa5oY6yCa\nDKqKbfNpvsDS7zMqpxDvHVAZegUzv1uf9WCQ8w2ixqe1V9IPut90gzGH+Ww0\nTq8yiYa5l4Bx+bok8RIOSjJIlPBfBc6oQsYQAzdeFOlqjvzqqDTamk37OCIs\nfoE67UtNhPFZ9JLXSmEkePpjRRwv2AugWI5EYyFnn/D+j8onDlRomas+q5kY\nW8vivUwXYK8Ys233A8olOYySdwG2Cv8gh12+W+vuVNGE1vph38Qf1GYSRTxf\nZGbnV7OSiouG94KIzfrHnLRCqMpFBS+w+EmR5w6EQaIGwZqRLsCNQ3TOjUmW\nOnlbOly8ex6xoEcPl7EFMg9dy5PsA47mRoyE4tuqW9aXLMXMRNwQ1QB/ie2u\nEmOsvCIOeAbfXZiAM0BNqAkpOuRHhE/yu1cP0W+pYMqkhxjDMtIEywbHEmnt\nsoORC91oQ0Aa3QylGFBb8tGwBvxosNcj3egTNkWaBNm2hZLCx3ESHRTdmm8m\nd0ML\r\n=9maB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGZuRhFJdlSKAxAQZeNylFz2UCIa8ol03aT0kCLtrnuwIgG86w0OONRWMTg8uPSXOQJQgJl0gX0gxW2uSLu4wlR9Y="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_6.1.0_1565168586724_0.39258261244607784"},"_hasShrinkwrap":false},"7.0.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"7.0.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/common":"^8.2.0","@angular/compiler":"^8.2.0","@angular/compiler-cli":"^8.2.0","@angular/core":"^8.2.0","@types/jest":"^24.0.17","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.4.3","rxjs":"^6.5.2","simple-spy":"^3.0.1","ts-jest":"^24.0.2","typescript":"3.5.3"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@7.0.0","_nodeVersion":"12.8.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-JAHioiGkenCusve/U7ee/laNpijkO1/5qGXi1iZAZxtLXVfw4ceuWf/Dyjz7hU4qOP1KSh60HQU86ve5D0wThg==","shasum":"4c2fb94b1d72535701bc9cbe89100b0b054d6314","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.0.0.tgz","fileCount":72,"unpackedSize":388321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphlUCRA9TVsSAnZWagAA25wQAInmzW4WdzsSZ3DltpUP\n95Xzyp19mKXaHMNprNYXV/68feG1U3eFR8d1ShBWPXBaW4AGhkAbIFp6Ey+8\nGAX5nCB4nsX0YhmLtBjLncPQAvh10Q+5ONk1RTKpFEV5FgrKWzb+iZbFZ+gp\nTxPWKismlWOEfwN/Cj6SfYRx1OvIDijYHm9KlOX2Wb48z2TTLe+0NKtxgdeK\ny5hrQqRbu5s7T88QjZRB/Tpig+xiUdbQQ1vW++H9pqZ6+DrT/KhmdqLFgwtC\nhjcIwQDUD8iOskOaBMrPjT5+RRYr/kxm8utAuUd06ACwsENfS8mN5D/YYn8F\nemVO0+3KXH7Qv+8Z2415ufFGl61hT2g7cuVJbFwru+P5y4cjAFaWTu8cV04Z\nwgjpkHRr7+QG2F8s2FuJY0htRujFmDyr9lqw9qoD7H316oKSbmbuJRcrsNNM\n5DtRB3J7RPLrpU1HWNx9IgrrX4AsbCik/85YhdNR3GmaG8V2TYswCRq811Mr\nEnE9vvMYYKjuHWBGKwlPh3Xg5MRkYhb9WJb6wHGUxE8/VgNMD3qd6NgeqLwq\n3SzQSpabFvCp3q5iH34rxAbhhCE7AQRJG62At2oj4SJoerzBX0w8Tajxc3zu\nw0+Q92ahGnih88Xq4rlVe7Dh4IiDfhvjAqODv8+2/BFmL6mIpInAsVZjmGwO\n4w6U\r\n=vcFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGA0c37pDmLmLlHfzDwRmIjk/owVl7/76JYIyvbgX/qQAiBTgqeW/Qz1dNkaeLDxqtXIsZd2O/0+sFLjwphBu8UCEA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_7.0.0_1571166548201_0.4566590762227236"},"_hasShrinkwrap":false},"7.0.1-0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"7.0.1-0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/common":"^8.2.0","@angular/compiler":"^8.2.0","@angular/compiler-cli":"^8.2.0","@angular/core":"^8.2.0","@types/jest":"^24.0.17","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.4.3","rxjs":"^6.5.2","simple-spy":"^3.0.1","ts-jest":"^24.0.2","typescript":"3.5.3"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n [![Status](https://img.shields.io/badge/status-active-success.svg)]()\n ![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n [![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image)\n
\n
\n [![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#setup)\n- [Usages](#usages)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ], // <-- and include it\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollPreset`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, scrollPreset } from 'ng-lazyload-image'; // <-- include scrollPreset\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: scrollPreset // <-- tell LazyLoadImage that you want to use scrollPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\ndefaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🔄 API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image well be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be usefull for large images.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset, LoadImageProps } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }: LoadImageProps): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nimport { IsVisibleProps } from 'ng-lazyload-image';\n\nfunction isVisible({ event, element, scrollContainer, offset }: IsVisibleProps) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { LoadImageProps } from 'ng-lazyload-image';\n\nfunction loadImage({ imagePath }: LoadImageProps) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }: LoadImageProps) {\n return [ imagePath ];\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { SetLoadedImageProps } from 'ng-lazyload-image';\n\nfunction setLoadedImage({ element, imagePath, useSrcset }: SetLoadedImageProps) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { SetErrorImageProps } from 'ng-lazyload-image';\n\nfunction setErrorImage({ element, errorImagePath, useSrcset }: SetErrorImageProps) {\n element.src = errorImagePath;\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be usefull for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction setup(atter: Attributes) {\n // Do something\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be usefull for setting css-classes.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction finally(atter: Attributes) {\n // Do something\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be usefull for SSR and SEO.\n\nDefault function:\n```ts\nexport const isBot: IsBotFn = navigator => {\n if (navigator && navigator.userAgent) {\n return /googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\\ link\\ preview|showyoubot|outbrain|pinterest\\/0\\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|duckduckbot/i.test(\n navigator.userAgent\n );\n }\n return false;\n};\n```\n\n### preset\n\nPreset can be usefull when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, scrollPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: scrollPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `scrollPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: scrollPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy:\n\n### Server side rendering (SSR)\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot don't understand javascript)\n- If the user is not a bot (or if we can't decide), don't do anything and let the client fix the images (see below)\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I'm getting the error: `NullInjectorError: No provider for ElementRef!`\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/390\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n\n\n","readmeFilename":"README.md","_id":"ng-lazyload-image@7.0.1-0","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-/S6FV73XrRjev9i+zvH1GYIKQc87MaiAIxetyGYOefni6Io7cBzBPRKs2xX/Vq3MHJoGGuJCoflnNJegnvDDxw==","shasum":"80a5724f27d19e0c8ab1acc2b405ce6aaf4d80c8","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.0.1-0.tgz","fileCount":72,"unpackedSize":389428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrr0lCRA9TVsSAnZWagAApUUP/iyd6VqxD0W0ib34WGUo\nXqS3VI4gSRgBmes2I7ZH5QWURKMOwJBoCu+epDNwVUUEtvHnsmFSBt9audUf\nc3ET10+TT0j6HVTKz+mTSaIISe6OPKDlEJ4ArB4F8oSypdeDs4iKXwOBfIPm\n8gteYhw9Z2oAEF7Rb/gkoGbb8Q9fThBNXe6JDv9uJSZwbJP0xZDRU9JgOFja\nCyvHntcivFIeKfhCxsPCRvmZPVYPrSI+PYbcqNZZrTHg7GP2iiOte8KRCWly\nnMcWU/dxp38wNS/XN7G9EhsWCRfT1lGiF1qhNhRo4aYIxYrIImV/eBLJQdWX\njsrIFtLDteudLXKnVSKO0tMtz6IfNNgxmfVjpu683zY4PFMFyqqq18eH9LQu\nM67lXEpa03xICu+zDYYpSdDViq50j+uHTdoFiNWN3gTLuMQKxF6qzCJexbeD\nL1am/O/UW9zANm6pbI0ZuUn8ENRBKo6aXzsgdVSYgfE0nZ5cxSg3xGTkmczM\nl6our5zV1y6zGaZBZ0+kndMV+wQIVxlC1bfUde8BVs75PNKqP7oEWzBIMBc2\nVBLnNitOv3wCU2g2ZtAqa2agBJ50LDrCxmgX0MwvNVWqFQwJzme6pY04PSId\n4jkL66DcGVb6raBCT66nRn2U/+gmSCdvrNDA7+3JJ/S6IGZ7iSd/sxzvs7y1\nXphk\r\n=Eu/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxIG3PYyPl31nNjq3PhzovNWYCfPh1/1+tEqTrT+T5lAiEAjKZx+Y9CyMY7qrx19GcXCH0IRPHkDAZMvrzpYxZas8M="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_7.0.1-0_1571732772925_0.023698715743004417"},"_hasShrinkwrap":false},"7.0.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"7.0.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/common":"^8.2.0","@angular/compiler":"^8.2.0","@angular/compiler-cli":"^8.2.0","@angular/core":"^8.2.0","@types/jest":"^24.0.17","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.4.3","rxjs":"^6.5.2","simple-spy":"^3.0.1","ts-jest":"^24.0.2","typescript":"3.5.3"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@7.0.1","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-0aTsuqeoos8gNlr9q7LJtWdODOuE3w/CDQHNK7lERU34TXJyM3ud77ccbArg+vaCHfzSaMkh87h/wZK4ZJ9dxw==","shasum":"c50f7eb581388673189d826bf504c352a73cb19f","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.0.1.tgz","fileCount":72,"unpackedSize":390361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrw2rCRA9TVsSAnZWagAAkPoP/RrNNNA1WqoFIAoVtzVe\nINyg2BQ96cEjD8myolmUYtopQzEAgHRABHZi82Xt5ZlCczfF3W+hrrBxAAsm\nvpNzQfGUpDs46g6abHjaGNVQ2qpoz8D2OQoKjUPfBpzRRXVt8ytcAv6XHWqV\nfvkSoigAyqNI9eCH6ldZF0J4Z5YNdCwxJuVULvVutkMyjN7U39fEHcaHPE7Q\ngg5VuIXN71yl8oQ4LWI12okXGGRoa6VKNXR5pAMbRp5vu31OcNzEdUVKwHya\n4SCj+0xY1I/dLWTAduFZoLOAj66hSQaB680ugaBBc03hH7pTxx4rKrfvLUdt\nwFnfnTEUblYWSh1wFuJDU+ebIGoA/B2KF2Wcd8SoeraLVOZoSIA7Z7KADQLC\nOEL94sS9ETm9V6Xl3hpLZ/cxqOttVE1qif6YHXJ0R8RNHfrlR4rtuV4ZojZ9\nWnxBedgRdFd2VQ/JD4flBzL/c+0rHzIOngWHQDYtj7T57H378yTYglVx2rYd\nBgplIlZfD1RxL3ViJ8Kqh4Cy08ITswtZlPJYC9cPQsAPfbkGVcAKtVbzlMIg\nQeeFZ6EQ0NNqX/4tCK5UEPx9cbpOU3lH9ZRK0xP1yv8Wk8uqKiyEOkPhYQs0\n2BW8kWdrRKdmenybHZ2ELxWzeuoirVoM3H4c9VMbUy3GedWlTyxIsUvNfSyq\nxSCR\r\n=m9Ds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcrNZxYxeFldyokGvWPitSEkGpHjZ3o3jdkA9w8BHMGAiBlv8MIXr9TfSQPdY0ePVgNGoKJ8B6KmDhoG79w6vl2tg=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_7.0.1_1571753386707_0.9589938827488707"},"_hasShrinkwrap":false},"7.0.2-0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"7.0.2-0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^1.9.0"},"devDependencies":{"@angular/common":"^8.2.0","@angular/compiler":"^8.2.0","@angular/compiler-cli":"^8.2.0","@angular/core":"^8.2.0","@types/jest":"^24.0.17","jest":"^24.8.0","marble-test":"^3.1.1","ng-packagr":"^5.4.3","rxjs":"^6.5.2","simple-spy":"^3.0.1","ts-jest":"^24.0.2","typescript":"3.5.3"},"prettier":{"singleQuote":true,"tabWidth":2,"printWidth":200},"browserslist":["ie 11","last 1 Chrome version","last 1 Firefox version","last 1 Safari version","last 1 iOS version"],"jest":{"preset":"ts-jest"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n [![Status](https://img.shields.io/badge/status-active-success.svg)]()\n ![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n [![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image)\n
\n
\n [![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#setup)\n- [Usages](#usages)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [ BrowserModule, LazyLoadImageModule ], // <-- and include it\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollPreset`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, scrollPreset } from 'ng-lazyload-image'; // <-- include scrollPreset\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: scrollPreset // <-- tell LazyLoadImage that you want to use scrollPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n
\n `\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n `\n})\nclass ImageComponent {\ndefaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🔄 API\n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image well be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n### Events\n\n##### onLoad (optional)\n\nType: `Function: (success: boolean) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is loaded.\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, intersectionObserverPreset, LoadImageProps } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nfunction loadImage({ imagePath }: LoadImageProps): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({ loadImage })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\n// This will trigger an event every second\nfunction getObservable(attributes: Attributes) {\n return interval(1000);\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-preset/intersection-listener.ts#L19) for example.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n```ts\nimport { IsVisibleProps } from 'ng-lazyload-image';\n\nfunction isVisible({ event, element, scrollContainer, offset }: IsVisibleProps) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { LoadImageProps } from 'ng-lazyload-image';\n\nfunction loadImage({ imagePath }: LoadImageProps) {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...'\n }\n }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nfunction loadImage({ imagePath }: LoadImageProps) {\n return [ imagePath ];\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { SetLoadedImageProps } from 'ng-lazyload-image';\n\nfunction setLoadedImage({ element, imagePath, useSrcset }: SetLoadedImageProps) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { SetErrorImageProps } from 'ng-lazyload-image';\n\nfunction setErrorImage({ element, errorImagePath, useSrcset }: SetErrorImageProps) {\n element.src = errorImagePath;\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction setup(atter: Attributes) {\n // Do something\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { Attributes } from 'ng-lazyload-image';\n\nfunction finally(atter: Attributes) {\n // Do something\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n```ts\nexport const isBot: IsBotFn = navigator => {\n if (navigator && navigator.userAgent) {\n return /googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\\ link\\ preview|showyoubot|outbrain|pinterest\\/0\\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|duckduckbot/i.test(\n navigator.userAgent\n );\n }\n return false;\n};\n```\n\nYou could also force all images to load under SSR by providing such a function to LazyLoadImageModule.forRoot:\n```ts\nexport function isBot(navigator, platformId) {\n return isPlatformServer(platformId) ? true : intersectionObserverPreset.isBot(navigator, platformId);\n}\n```\n\n### preset\n\nPreset can be useful when you want to set multible of the functions above.\n\neg.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, scrollPreset } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [ AppComponent ],\n imports: [\n BrowserModule,\n LazyLoadImageModule.forRoot({\n preset: scrollPreset\n })\n ],\n bootstrap: [ AppComponent ]\n})\nexport class MyAppModule {}\n```\n\nIf you want to use the `scrollPreset` but overwride on of the functions, you can easily do that:\n\n```ts\nLazyLoadImageModule.forRoot({\n preset: scrollPreset,\n finally: ({ element }) => console.log('The image is loaded', element)\n})\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy:\n\n### Server side rendering (SSR)\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot don't understand javascript)\n- If the user is not a bot (or if we can't decide), don't do anything and let the client fix the images (see below)\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I'm getting the error: `NullInjectorError: No provider for ElementRef!`\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/390\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n\n\n","readmeFilename":"README.md","_id":"ng-lazyload-image@7.0.2-0","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-USd3+wH0BwPzK3GY/QfW+s/D6wQE4xbPPYW8N1V8Hajsww4SQCS7xL0sk06Greo2BHjbtUSGH4EfAoAsWxWbtw==","shasum":"be530a2cd2c8baa985eb9075b655f4ce25a508b8","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.0.2-0.tgz","fileCount":72,"unpackedSize":392488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvAe6CRA9TVsSAnZWagAA6B4P/17jHubOuchd/DSq9/6U\n0HM0iiYrBhHXlDaY6u68V8LVzg+vK1LVrG/RnLCJJCa5MwS1ha1++QEJN7QO\nMCkFijAwdMDzIvxFHpMZgmAOLqBsh193BRtOCASU0+3O7af7PONzJhlL9POQ\nYB+mZMd4ZIslbqTQi8OMcnYIVNFIVy3yZBrkNYUGTfQc73q+OecYFhBUDYiZ\n5zj88nXfN1ocxcgAv7dKDPvbSU/FuAuRn40BzPwXyzqXRSP19S9HTESn0Ee4\nyqjpc/CQvVNIItA1M/kn57p2bSp7EUfkghkymBh13ZyGD0SCDsIZ/X5Qq3Oy\nIpBabeu5rp68wGxgdoShpPN8IiLx+BzDaJ10qVL7KBUuQc8rax8SYzzZbsOq\nIQxHKX5wVql6J0yDiH5WPrwvVWXQI+RsNCJXVHmCY/yJC8Q1Xy3JrFcR6OYT\nF4wz7pjZQWS5sSP8czfJhuY2ff1kl8OmSb2tdcpjXkgfP1m8Ou3/GpsTKfjF\n/6r1B5OphyVHXnE0csG6JYfPzc9QucqD4c0VEk99teGCOT29NwtI+xVP5Ag8\nrlCsU+Kf9afnBsupCkSYyfAx03HQyxGHzTQXCE5nPfSvWetkgPZ2TiJEsNZH\nweSdY9bPpipOEDq7Vcdk9MbUuEru71VZugfyJuHznYspMfFFhHkdS7g10bRH\njDc2\r\n=fwNW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHO2ilT9KD7CTvEfNdlzx4LPb4N08/h2poRRSPB3MPaFAiEA+xD9q1gZnD5uTcz1rrxZwAXzBOKQdtgcDZ+ShdXJf00="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_7.0.2-0_1572603834084_0.49438614020465566"},"_hasShrinkwrap":false},"7.1.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"7.1.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0","tslib":"^1.10.0"},"dependencies":{},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@7.1.0","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-1fip2FdPBDRnjGyBokI/DupBxOnrKh2lbtT8X8N1oPbE3KBZXXl82VIKcK2Sx+XQD67/+VtFzlISmrgsatzYuw==","shasum":"8e3428300506e541fb1f4befe7d62cbaffbd2235","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz","fileCount":73,"unpackedSize":447904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUVegCRA9TVsSAnZWagAAOysP/16n4hvrYt5CsnwLQXsx\nC7YSsu4lO0N+vJuyYM44jUqb5gNjLh3EoqzvmumEpSqXfKGK1KQwWuJFmq+G\nLgfuXhmYtOCVX8b0CEDbteGz7qV7CtIyoWVACpJG0CxpgbJ2tIg/1RarFcKs\nd0LHs3pBi5OGdCGUnFlcuWmNYLj1SMBLunxT0D80p/c+yUJkltOVlLNHi5oi\nsTUIurm5DCgx6xZY7GDEMsT4FAMvgCcoRZJ/fAym9dbvA78Y0GOgC30yVofF\nZ2cUlKS89WZZ7OeMs9JQBmN1sjI2jJIgpYp7/b8PNMem7Sa2/8GjNMZm7BPP\nUAkfJgJIefvcKmPvhF7FT3S8mURl8WLT12k3PjC7Mffx2yLIQ4K19tgIsDaC\nao94421264z49qsQkA0fH3q93l8yYdP6P2cmpsoZCZ2UMKClfhGcd9rfixfc\nJQGZoWf/OBgn4nCD9WTqSNe+xgxPKzuV6+XfbXxrHc5jwywZnoIy/ebFV+yz\nq9Jd6lTB2xdB7syThSF6nCU93xed01s69bHkEsmBv8TQfxzFFzN+jU1bisZN\nreGuMP9spU9d+ufwzu6Nyk2NIU1wDMc4njhS5PZaD0oKWHwFAoURHQrtyshU\nDItEj8WhY1Sfiwed9DqbT4i3uPqfVFXCWqLut9wDPvamiX5PjC2hWMyhprIj\nwi/t\r\n=sEpj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg2l9qydOd+zvt4YEGg/QJuR0woxg01r/vW6hICVIOwAiAOPwG5AiCeLLCQeqp6+sS+V86Z8UPNkNC8TFUnAz5G8Q=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_7.1.0_1582389151483_0.6026744969140732"},"_hasShrinkwrap":false},"8.0.0-beta.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"8.0.0-beta.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0","tslib":"^1.10.0"},"dependencies":{},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n[![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![Build Status](https://github.com/tjoskar/ng-lazyload-image/workflows/Node%20CI/badge.svg)\n\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#libsetup)\n- [Usages](#usages)\n- [Debug](#debug)\n- [CSS](#css)\n- [API](#api)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule], // <-- and include it\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollHooks`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(ScrollHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `
`,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n\n```javascript\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `,\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🐛 Debug \n\nIn order to get a better understanding of what is happening you can pass `[debug]=\"true\"` which will output some debug information in the web console.\n\nSee [onStateChange](#onStateChange) for more information about the diffrent output messages.\n\n## 💅 CSS \n\nThe css class name `ng-lazyloading` will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.\n\nThe css class name `ng-lazyloaded` will be added when the image is loaded (regardless of if the image could be loaded or not).\n\nThe css class name `ng-failed-lazyloaded` will be added when the image couldn't be loaded.\n\n## 🔄 API \n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image will be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n##### debug (optional)\n\ntype: `boolean`\n\nExaple: `true`\n\nSee [debug](#debug) for more information.\n\n### Events\n\n##### onStateChange (optional) \n\nType: `Function: (event: StateChange) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is getting into different state.\n\n```ts\nmyCallbackFunction(event: StateChange) {\n switch (event.reason) {\n case 'setup':\n // The lib has been instantiated but we have not done anything yet.\n break;\n case 'observer-emit':\n // The image observer (intersection/scroll observer) has emit a value so we\n // should check if the image is in the viewport.\n // `event.data` is the event in this case.\n break;\n case 'start-loading':\n // The image is in the viewport so the image will start loading\n break;\n case 'mount-image':\n // The image has been loaded successfully so lets put it into the DOM\n break;\n case 'loading-succeeded':\n // The image has successfully been loaded and placed into the DOM\n break;\n case 'loading-failed':\n // The image could not be loaded for some reason.\n // `event.data` is the error in this case\n break;\n case 'finally':\n // The last event before cleaning up\n break;\n }\n}\n```\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...',\n },\n })\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nYou can even use other services by inject them. Lets say you want to use Angulars https class instead of `window.fetch`:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n private http: HttpClient;\n\n constructor(http: HttpClient) {\n super();\n this.http = http;\n }\n\n loadImage({ imagePath }: Attributes): Promise {\n return this.http.get(imagePath, {\n responseType: 'blob',\n headers: { Authorization: 'Bearer ...' },\n }).pipe(map(blob => URL.createObjectURL(blob)));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks, [HttpClient])], // You must add the dependency list here\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport. It is important that the emited event is of the same type `isVisible` expects.\n\nEg.\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Will emit `{ isIntersecting: true }` every second.\n // You will have to overwride `isVisible` if you want to pass another event\n return interval(1000).pipe(mapTo({ isIntersecting: true })));\n }\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts) for example.\n\nSee `isVisible` if you want to use your own event.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n\n```ts\nimport { Attributes, ScrollHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends ScrollHooks {\n isVisible(event: Event | string, { element, scrollContainer, offset }: Attributes) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\nIf you want to create your own event, you can create both `getObservable` and `isVisible` by extend `SharedHooks`:\n\n```ts\nimport { Attributes, SharedHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends SharedHooks {\n\n getObservable(attributes: Attributes) {\n return interval(1000);\n }\n\n isVisible(event: number, attributes: Attributes) {\n // `event` is 0,1,2,3,4,5,...\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath)\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes) {\n return [imagePath];\n }\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setLoadedImage({ element, imagePath }: Attributes) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n }\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setErrorImage({ element, errorImagePath }: Attributes) {\n element.src = errorImagePath;\n }\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setup(attributes: Attributes) {\n // Overwride the path to the default image for all lazyloaded images\n attributes.defaultImagePath = 'some/path.jpg';\n // You can always call the base `setup` if you want to keep the default behavior\n super.setup(attributes);\n }\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n finally(attributes: Attributes) {\n // So something\n }\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isBot(attributes: Attributes) {\n // Check if the user is a bot or not.\n // You have access to `navigator`:\n this.navigator; // Is the same as `window.navigator` if window is defined otherwise undefined.\n isPlatformServer(this.platformId); // True if the code is running on the server\n }\n}\n```\n\nBoth `IntersectionObserverHooks` and `ScrollHooks` will load the image as soon as possble if `isBot` returns `true`. Lets say you want to \n\n\n```ts\nisBot(attributes: Attributes) {\n return isPlatformServer(platformId) ? true : intersectionObserverPreset.isBot(navigator, platformId);\n}\n```\n\n### isDisabled\n\nA function to decided if the module should be disabled. The default behavior is to disable it on the server if the user is not a bot:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isDisabled() {\n // This is the same as: `return super.isDisabled();`\n return isPlatformServer(this.platformId) && !this.isBot();\n }\n}\n```\n\n### skipLazyLoading\n\nA function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\nOr maybe you want to load the image ASAP from specific domains\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n const imageUrl = new URL(attributes.imagePath);\n return imageUrl.hostname === 'example.org';\n }\n}\n```\n\nThe default behavior for `skipLazyLoading` is to call `isBot`. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.\n\n### onAttributeChange\n\nThis function is called when some of the atrebute of the image is changed.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n }\n}\n```\n\n### onDestroy\n\nThis function is called when a image is loaded and the directive will unmount, aka. when `ngOnDestroy` is called in the directive. This can be useful if you want to do some cleanup.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n imageToBeLoaded = new Map();\n\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n imageToBeLoaded.set(newAttributes.id, newAttributes);\n }\n\n ngOnDestroy(attributes: Attributes) {\n imageToBeLoaded.delete(newAttributes.id);\n }\n}\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy by default:\n\n### Server side rendering (SSR)\n\nIf the incoming request is from a bot; it will set `[lazyLoad]` to `src` on the image (useful if the bot don't understand javascript).\n\nIf the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).\n\nYou can chang this behavior by implementing your own `skipLazyLoading` function (see `skipLazyLoading` above). Let's say you always want to show the image ASAP, regardles of if the user is a bot or not:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I'm getting the error: `NullInjectorError: No provider for ElementRef!`\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/390\n\n**Q** It doesn't work with `BrowserAnimationsModule`\n\n**A** Are you using the scroll preset? If so, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/438).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@8.0.0-beta.1","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-GCH6O+vyldV6Dtk1exJyezFJAasdaOmvcKIWPNlfcMMNm6p6KoIBvAt725OwdSJc6NOCJMSkDSz4rxIpe1czfg==","shasum":"b71f21ab7ecf22fd2ce75e7e490cea3fbeab0fed","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-8.0.0-beta.1.tgz","fileCount":58,"unpackedSize":459016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeynEHCRA9TVsSAnZWagAAYYQP/3JpAUzuPXyx157sYalT\nZryKjT3v8zO6mR8fm06b4tsKExESOSsoiLM+IAunYMKRqWhVbIqMgCoSiWn/\nH+QFo+2chcFcRm7JXu2hPRrj0vOXwbWF4a0Q7Yi6iTtQQyqo4NF1KTqvKgR0\n3LK+ZLDRd/fmJaO8vsAHZn97bJM5IgJsny6wRicWV+18Jvjx16Ll8Sn+dj16\n0JNxMUuZS5ELzH3kHQUi1DfBnAgdzgU3vrZR3v9/ZylU983tWFoLH6NKtyby\ndAAoVMn3+9+TRP+xfNcWyOK3jl6JTBxm2wkyQBuK/KMUh5pLWRxJxfNZdUMT\nr2V4/VVLipAF+t6QbPaKVR2U7SjhDMxtwIy2SISmKPHZCAwDe81mVqleEE4l\nHHfOPTSl9qOpvoHehQ/OFvFMIm/euy+lx+pxf1bORIw2xqloXUpSaW3NmnBV\nbLuZEJvlZsV3MOEjmg9LKfxBbWtkF1+S7lqvaS2YEC9g46op7fkHkb2XUqCL\nH8MxPQUPWL4qj3ffYfT9tn3/kmCjEAtPboz5e221dimliuRbg1PjrC+oP8aN\nZuMejTzxm26Zqbi2jY+hiy//TIGMZ7itICXiUfJtoUfcpBaOW9tm+IduFYYj\nJgFpAKl4NGXNEW6OnkCTBnX0x+y+4vXOATjkFLBHa3vOCRE++ub91ECaQpa4\n651h\r\n=u43U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpYd+zjYdJtwDCuSn+5JdXlmxRezUjhiwqH8jiQZ6VqAiBvQ1GYy85d7P/WfmJ6jrnJCMEWWeoBNi0ETCAixA8fSA=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_8.0.0-beta.1_1590325511279_0.386532097971384"},"_hasShrinkwrap":false},"8.0.0-beta.2":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"8.0.0-beta.2","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0","tslib":"^1.10.0"},"dependencies":{},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n[![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![Build Status](https://github.com/tjoskar/ng-lazyload-image/workflows/Node%20CI/badge.svg)\n\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#libsetup)\n- [Usages](#usages)\n- [Debug](#debug)\n- [CSS](#css)\n- [API](#api)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule], // <-- and include it\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollHooks`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(ScrollHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `
`,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n\n```javascript\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `,\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🐛 Debug \n\nIn order to get a better understanding of what is happening you can pass `[debug]=\"true\"` which will output some debug information in the web console.\n\nSee [onStateChange](#onStateChange) for more information about the diffrent output messages.\n\n## 💅 CSS \n\nThe css class name `ng-lazyloading` will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.\n\nThe css class name `ng-lazyloaded` will be added when the image is loaded (regardless of if the image could be loaded or not).\n\nThe css class name `ng-failed-lazyloaded` will be added when the image couldn't be loaded.\n\n## 🔄 API \n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image will be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n##### debug (optional)\n\ntype: `boolean`\n\nExaple: `true`\n\nSee [debug](#debug) for more information.\n\n### Events\n\n##### onStateChange (optional) \n\nType: `Function: (event: StateChange) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is getting into different state.\n\n```ts\nmyCallbackFunction(event: StateChange) {\n switch (event.reason) {\n case 'setup':\n // The lib has been instantiated but we have not done anything yet.\n break;\n case 'observer-emit':\n // The image observer (intersection/scroll observer) has emit a value so we\n // should check if the image is in the viewport.\n // `event.data` is the event in this case.\n break;\n case 'start-loading':\n // The image is in the viewport so the image will start loading\n break;\n case 'mount-image':\n // The image has been loaded successfully so lets put it into the DOM\n break;\n case 'loading-succeeded':\n // The image has successfully been loaded and placed into the DOM\n break;\n case 'loading-failed':\n // The image could not be loaded for some reason.\n // `event.data` is the error in this case\n break;\n case 'finally':\n // The last event before cleaning up\n break;\n }\n}\n```\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...',\n },\n })\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nYou can even use other services by inject them. Lets say you want to use Angulars https class instead of `window.fetch`:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n private http: HttpClient;\n\n constructor(http: HttpClient) {\n super();\n this.http = http;\n }\n\n loadImage({ imagePath }: Attributes): Promise {\n return this.http.get(imagePath, {\n responseType: 'blob',\n headers: { Authorization: 'Bearer ...' },\n }).pipe(map(blob => URL.createObjectURL(blob)));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks, [HttpClient])], // You must add the dependency list here\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport. It is important that the emited event is of the same type `isVisible` expects.\n\nEg.\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Will emit `{ isIntersecting: true }` every second.\n // You will have to overwride `isVisible` if you want to pass another event\n return interval(1000).pipe(mapTo({ isIntersecting: true })));\n }\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts) for example.\n\nSee `isVisible` if you want to use your own event.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n\n```ts\nimport { Attributes, ScrollHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends ScrollHooks {\n isVisible(event: Event | string, { element, scrollContainer, offset }: Attributes) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\nIf you want to create your own event, you can create both `getObservable` and `isVisible` by extend `SharedHooks`:\n\n```ts\nimport { Attributes, SharedHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends SharedHooks {\n\n getObservable(attributes: Attributes) {\n return interval(1000);\n }\n\n isVisible(event: number, attributes: Attributes) {\n // `event` is 0,1,2,3,4,5,...\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath)\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes) {\n return [imagePath];\n }\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setLoadedImage({ element, imagePath }: Attributes) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n }\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setErrorImage({ element, errorImagePath }: Attributes) {\n element.src = errorImagePath;\n }\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setup(attributes: Attributes) {\n // Overwride the path to the default image for all lazyloaded images\n attributes.defaultImagePath = 'some/path.jpg';\n // You can always call the base `setup` if you want to keep the default behavior\n super.setup(attributes);\n }\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n finally(attributes: Attributes) {\n // So something\n }\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isBot(attributes: Attributes) {\n // Check if the user is a bot or not.\n // You have access to `navigator`:\n this.navigator; // Is the same as `window.navigator` if window is defined otherwise undefined.\n isPlatformServer(this.platformId); // True if the code is running on the server\n }\n}\n```\n\nBoth `IntersectionObserverHooks` and `ScrollHooks` will load the image as soon as possble if `isBot` returns `true`. Lets say you want to \n\n\n```ts\nisBot(attributes: Attributes) {\n return isPlatformServer(platformId) ? true : intersectionObserverPreset.isBot(navigator, platformId);\n}\n```\n\n### isDisabled\n\nA function to decided if the module should be disabled. The default behavior is to disable it on the server if the user is not a bot:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isDisabled() {\n // This is the same as: `return super.isDisabled();`\n return isPlatformServer(this.platformId) && !this.isBot();\n }\n}\n```\n\n### skipLazyLoading\n\nA function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\nOr maybe you want to load the image ASAP from specific domains\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n const imageUrl = new URL(attributes.imagePath);\n return imageUrl.hostname === 'example.org';\n }\n}\n```\n\nThe default behavior for `skipLazyLoading` is to call `isBot`. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.\n\n### onAttributeChange\n\nThis function is called when some of the atrebute of the image is changed.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n }\n}\n```\n\n### onDestroy\n\nThis function is called when a image is loaded and the directive will unmount, aka. when `ngOnDestroy` is called in the directive. This can be useful if you want to do some cleanup.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n imageToBeLoaded = new Map();\n\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n imageToBeLoaded.set(newAttributes.id, newAttributes);\n }\n\n ngOnDestroy(attributes: Attributes) {\n imageToBeLoaded.delete(newAttributes.id);\n }\n}\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy by default:\n\n### Server side rendering (SSR)\n\nIf the incoming request is from a bot; it will set `[lazyLoad]` to `src` on the image (useful if the bot don't understand javascript).\n\nIf the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).\n\nYou can chang this behavior by implementing your own `skipLazyLoading` function (see `skipLazyLoading` above). Let's say you always want to show the image ASAP, regardles of if the user is a bot or not:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** I can't get it to work with electron. Can you help me?\n\n**A** Make sure you uses the [right file path](https://github.com/tjoskar/ng-lazyload-image/issues/308#issuecomment-368240550).\n\n**Q** I'm getting the error: `NullInjectorError: No provider for ElementRef!`\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/390\n\n**Q** It doesn't work with `BrowserAnimationsModule`\n\n**A** Are you using the scroll preset? If so, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/438).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@8.0.0-beta.2","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-rISWWvIvhT+h1GZK1w7Pj1WTigI0wnz7kJwmfWsfUxbUjaJwPxKugHBtyya0RIQx+p3YKYxKXz9hquRzOdIYJQ==","shasum":"3c13aa212218cfc8c83a05a5df3264bbffb15e1c","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-8.0.0-beta.2.tgz","fileCount":58,"unpackedSize":460373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyokzCRA9TVsSAnZWagAAsCAQAIhanJV5D9ti5J/2bNvo\nxOzdoJq4rdxZ3Nu89tphser62RLIxfyLPFYRiAR3ZvjA+LDNL4tjhEXOJJYZ\nGoN01TVuCDfiil9oyfIpP0fBiwOVPjfKeqvtj1SOqvzeR5aFBa4hPuqhKDfY\nqWjjVXFkYvWFNSyhGKyH4nqpy/zIiweW6c/QiC1p+pCezN70ycW2+qikPhKs\n5XgkoYX2VLbrb1RMcgqGRNkweDCPsn7ZCUeOFnclcE1zC+UfOigvQG2BOGJU\nxH6ZTO2EsDs0t/g3Tt0EZc7UAnlXbVv3XKhq3DhFKH5yTLU2cLgsxgBQFXFb\nv4sh/w6eAKc8TY98iFv2wOXjwNpHHBF8meGrnby1gsa+ttO/L6S85yrddq4E\nRYpI2iL3SGSw847VDrEs3NbL1fgaDS+4LENoWh7sKT1OJS5rVhppp+B3iUcP\n1zhAT/G8GZXkcA39DDDjQmFb9ffSYrl5NHigmfSe6D5ejnr6e4iiX6EW/BrF\nOVtApdIZO3QsUTWrUk+2bglUqvTtO6/gl+rklib5cXlGG3+gGGkoORcLpq4S\ncHQ5pg0eJC12A9DDmEfnoAzdnm9SdvYyRzm0QmjJ580IG7dQzwK1Tt0/yolj\nOeb0hkoqY5ALQYgVSfSyWDhE4yzezwBgnmAk+Uhd6NYS4yePJi80tpAPT2t0\nVZd8\r\n=S9xk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoDNHe8NSLk9hZ0cwARDoFty16Vh5UwBimivGTyNI6CAIhAIlsA3HqRAJQgVMEVi7OYrosmDOjZsBWeCJHVgx/Dw8S"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_8.0.0-beta.2_1590331698601_0.437508414362743"},"_hasShrinkwrap":false},"8.0.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"8.0.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0","tslib":"^1.10.0"},"dependencies":{},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@8.0.0","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-sHA45TYOJevLechpU4bAjlZv0XWrsf4NqUcApM5/eRWjL+WGZk3URFA9IR4eiqT3jffdKA+IWPBZtfBPhgjh9w==","shasum":"31887453ab8bcc9f8a7112ccd00f791caf1ff2ad","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-8.0.0.tgz","fileCount":58,"unpackedSize":464097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0NdPCRA9TVsSAnZWagAAqWMP/j5dsdsKi1UdLVHPxP9L\nmyVUXKDPeZYyaotaBWh0zaLKlpN9F68/O7Ihp9f8LFWuxf+nCe/idyhuSax9\nE4I7EMJBhXNK9j1+4it14snB0OeMQq3PKhwALTyV1vidiOo2UgxLNdrLiUe6\nudifJgoEIczTnIqsZcMGNDa6b+2myp2SiGIUo0LPF39itGOmEHIbzmfIm8HK\nfnDOyYavNJ9NN9rhpEDMJvP35Auczo/a95Z0aFzvWQftKLjn0DQrvJX6WWgs\nKeMknnhN40ssR0HtIhPTfHuWxU3wgo2mYgWn0lSOxHEpusGPdUxbmH+Z5E4R\nD/FD04si86QHGQViWlNfNt5xdyJI2He7ZbkT5ZBhiCWmztIwbwAdQkQ/wmlI\nDfQHjNhLLrH6ROjlVJeU9q+0eoQfLblFe93o4hhlhFiHvywcj9gijZN8ra0a\nxvmlsDS4J2FuIFEwu3ltNC32M2dD+EwBRLDJ5/Mf4C5/YOY5PzfOjdx15pRz\nPfcx/4TmMZfC8KzBKZsy+JG1HkpNGU0bwvS03ZiNQzP4e8Z30pbX0FYfaSea\nnix+9WSqBvJP1CDwyrNi+d5qR5gaO0Z+Kvu1pStVD0YzMPA5ofUUIFlNXpjY\nhPOyeq/nNN6+s08gr3rf1qGHX2MsS4RzSbeIzF9PSGIFpO9VHuRzDl7uLSIu\nfJlK\r\n=HnFa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlvsb0TOGnQf/X/983ODey274lZpnnT+KdCLlEfim22AIhAILUB81PUW15zQCNUqbJ3eUpNA1ctRJyZjFWBquVBoa6"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_8.0.0_1590744910882_0.3568436810836071"},"_hasShrinkwrap":false},"8.0.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"8.0.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=7.0.0","@angular/common":">=7.0.0","rxjs":">=6.0.0","tslib":"^1.10.0"},"dependencies":{},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm5/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm5":"esm5/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm5":"fesm5/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@8.0.1","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-x4zV6BJn5+0FilS16aVkWYBefLOVYE4d5trbw3voe6p2VYPcKmBSvjkKYTghyMYY2segGjnIsKDEfG0WoSOIEA==","shasum":"1654233d7a37af42be1b87614133d60f1b3d74b2","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-8.0.1.tgz","fileCount":58,"unpackedSize":466991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0QkICRA9TVsSAnZWagAAomYQAIlh4qAfFRpmQjjvyR1r\nkrsHuPlQ9Rp2En1QXIfCX7qtGb7J8cBIyRw/2iSN5suBGnpUQBOi2qU6YIL1\nexHoLgSXggYf7G9tPqaDCDLV9OhleksNEIK3gaPt98MZK5Uh2jXjNMx588Dl\nISSjw75+wYO+lTsuG/DcShZR03VthCrw9gcRb3flrGM1Ln6uNuYolqlMPmkG\n8igyDFvE2DVveOMrc68W8v1jjexrxu9jZp6GLVOHbuvnYCk6EUrs5r/J4TOe\ntX2rcpaCbQ/YQ4OjQlLvtJRG8Vt455Fj3Ia5PM2rOKH6NOQ9XXYBTno4o98N\nLXFKpqhMXgRvUZ7hFD1zPDh/oBb8da9QUC26Utg3q7ADRBa0sr8i5bDv5Jru\nn3B5ku/QYOYwLdoJB41cUU4ePr/95yqBUrdD3YeVJsVni4Pcj8OFPq9IZ3sL\nQmVuuYjlCykmS4vajV7F4tCQrRTsjCSU8zZqH/u+PzibnlT75v2AHdU93XEe\nTMk7WBc0k5KnwzYR3dskaowv9QzgqgMrIoo5mW6t5AY2BhP2eqO6GO++5Eu4\nM6pAP4yNCmer9NNGCpUNUg4NQ45ZpwpwNvEBD95vmQXkDUn9hLH3tE/ofaXu\ne9yZmBE0AuELMbwuKqzMzplWIl03FjZSeuMhY+O+QmBHHx5Nq9K//nDUIhZ9\nq5mA\r\n=it8N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwZSyBl+ZssSuVRsVzU1tOewapmmWmBoUSwUKM6XnkkAiAMTtUH+U0MgbNkgOSNfuwVaEMUmo1LtjmOFskBT5YnxQ=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_8.0.1_1590757640168_0.027083795687857792"},"_hasShrinkwrap":false},"8.0.2-21":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"8.0.2-21","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n[![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![Build Status](https://github.com/tjoskar/ng-lazyload-image/workflows/Node%20CI/badge.svg)\n\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#libsetup)\n- [Usages](#usages)\n- [Debug](#debug)\n- [CSS](#css)\n- [API](#api)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule], // <-- and include it\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollHooks`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(ScrollHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nSee hooks below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images, by using `backgroundImage`:\n\n```javascript\n@Component({\n selector: 'image',\n template: `
`,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n\n```javascript\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `,\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🐛 Debug \n\nIn order to get a better understanding of what is happening you can pass `[debug]=\"true\"` which will output some debug information in the web console.\n\nSee [onStateChange](#onStateChange) for more information about the diffrent output messages.\n\n## 💅 CSS \n\nThe css class name `ng-lazyloading` will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.\n\nThe css class name `ng-lazyloaded` will be added when the image is loaded (regardless of if the image could be loaded or not).\n\nThe css class name `ng-failed-lazyloaded` will be added when the image couldn't be loaded.\n\n## 🔄 API \n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image will be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n##### debug (optional)\n\ntype: `boolean`\n\nExaple: `true`\n\nSee [debug](#debug) for more information.\n\n### Events\n\n##### onStateChange (optional) \n\nType: `Function: (event: StateChange) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is getting into different state.\n\n```ts\nmyCallbackFunction(event: StateChange) {\n switch (event.reason) {\n case 'setup':\n // The lib has been instantiated but we have not done anything yet.\n break;\n case 'observer-emit':\n // The image observer (intersection/scroll observer) has emit a value so we\n // should check if the image is in the viewport.\n // `event.data` is the event in this case.\n break;\n case 'start-loading':\n // The image is in the viewport so the image will start loading\n break;\n case 'mount-image':\n // The image has been loaded successfully so lets put it into the DOM\n break;\n case 'loading-succeeded':\n // The image has successfully been loaded and placed into the DOM\n break;\n case 'loading-failed':\n // The image could not be loaded for some reason.\n // `event.data` is the error in this case\n break;\n case 'finally':\n // The last event before cleaning up\n break;\n }\n}\n```\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...',\n },\n })\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nYou can even use other services by inject them. Lets say you want to use Angulars https class instead of `window.fetch`:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n private http: HttpClient;\n\n constructor(http: HttpClient) {\n super();\n this.http = http;\n }\n\n loadImage({ imagePath }: Attributes): Promise {\n return this.http.get(imagePath, {\n responseType: 'blob',\n headers: { Authorization: 'Bearer ...' },\n }).pipe(map(blob => URL.createObjectURL(blob)));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks, [HttpClient])], // You must add the dependency list here\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport. It is important that the emited event is of the same type `isVisible` expects.\n\nEg.\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Will emit `{ isIntersecting: true }` every second.\n // You will have to overwride `isVisible` if you want to pass another event\n return interval(1000).pipe(mapTo({ isIntersecting: true })));\n }\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts) for example.\n\nSee `isVisible` if you want to use your own event.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n\n```ts\nimport { Attributes, ScrollHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends ScrollHooks {\n isVisible(event: Event | string, { element, scrollContainer, offset }: Attributes) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\nIf you want to create your own event, you can create both `getObservable` and `isVisible` by extend `SharedHooks`:\n\n```ts\nimport { Attributes, SharedHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends SharedHooks {\n\n getObservable(attributes: Attributes) {\n return interval(1000);\n }\n\n isVisible(event: number, attributes: Attributes) {\n // `event` is 0,1,2,3,4,5,...\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath)\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes) {\n return [imagePath];\n }\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setLoadedImage({ element, imagePath }: Attributes) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n }\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setErrorImage({ element, errorImagePath }: Attributes) {\n element.src = errorImagePath;\n }\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setup(attributes: Attributes) {\n // Overwride the path to the default image for all lazyloaded images\n attributes.defaultImagePath = 'some/path.jpg';\n // You can always call the base `setup` if you want to keep the default behavior\n super.setup(attributes);\n }\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n finally(attributes: Attributes) {\n // So something\n }\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isBot(attributes: Attributes) {\n // Check if the user is a bot or not.\n // You have access to `navigator`:\n this.navigator; // Is the same as `window.navigator` if window is defined otherwise undefined.\n isPlatformServer(this.platformId); // True if the code is running on the server\n }\n}\n```\n\nBoth `IntersectionObserverHooks` and `ScrollHooks` will load the image as soon as possble if `isBot` returns `true`. Lets say you want to \n\n\n```ts\nisBot(attributes: Attributes) {\n return isPlatformServer(platformId) ? true : intersectionObserverPreset.isBot(navigator, platformId);\n}\n```\n\n### isDisabled\n\nA function to decided if the module should be disabled. The default behavior is to disable it on the server if the user is not a bot:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isDisabled() {\n // This is the same as: `return super.isDisabled();`\n return isPlatformServer(this.platformId) && !this.isBot();\n }\n}\n```\n\n### skipLazyLoading\n\nA function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\nOr maybe you want to load the image ASAP from specific domains\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n const imageUrl = new URL(attributes.imagePath);\n return imageUrl.hostname === 'example.org';\n }\n}\n```\n\nThe default behavior for `skipLazyLoading` is to call `isBot`. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.\n\n### onAttributeChange\n\nThis function is called when some of the atrebute of the image is changed.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n }\n}\n```\n\n### onDestroy\n\nThis function is called when a image is loaded and the directive will unmount, aka. when `ngOnDestroy` is called in the directive. This can be useful if you want to do some cleanup.\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n imageToBeLoaded = new Map();\n\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n imageToBeLoaded.set(newAttributes.id, newAttributes);\n }\n\n onDestroy(attributes: Attributes) {\n imageToBeLoaded.delete(attributes.id);\n }\n}\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy by default:\n\n### Server side rendering (SSR)\n\nIf the incoming request is from a bot; it will set `[lazyLoad]` to `src` on the image (useful if the bot don't understand javascript).\n\nIf the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).\n\nYou can chang this behavior by implementing your own `skipLazyLoading` function (see `skipLazyLoading` above). Let's say you always want to show the image ASAP, regardles of if the user is a bot or not:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** You can either use the `getObservable` hook if you can trigger the loading outside the dom or you can use the `customObservable` input, see above and https://github.com/tjoskar/ng-lazyload-image/issues/197\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener. https://github.com/tjoskar/ng-lazyload-image/issues?utf8=%E2%9C%93&q=is%3Aissue+Ionic\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** It doesn't work with `BrowserAnimationsModule`\n\n**A** Are you using the scroll preset? If so, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/438).\n\n**Q** Can I add a debounce time before loading the image>\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/456).\n\n**Q** Can I cancel image loading when the user change page?\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/458).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@8.0.2-21","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-FX8Ks1gR/ReCwyxB/Yxg4zcPN7u25yroIl3Y0WBRQ98HRTY6UjGERLJMYBo7a5q0LYr/cgiOqPJnaToL06sNjA==","shasum":"659c7bbf448aaad10de044e748555e5e59e845eb","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-8.0.2-21.tgz","fileCount":37,"unpackedSize":324187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDuV8CRA9TVsSAnZWagAAPUQQAJWc2fnWF55pLwp0Apl6\nPdTWn+66b6gssbh4YKBVZsIFmOZBFTfg44Kn5WDym9qSUsWW6t3xTZVMGglc\nSwyKIQBaD3yUtf2PeDufTIKkH4bHsh3iFdbmADmV8juFVoSMpIi0+18ZsqAI\nzuJOUIlTHAi306ZKiLO+Gz5eYxqwF91ezU/DydOdbe6nH/bvFZgihYg5Mm/O\nMEXvdZXOFe38fkk0zjp7Ibw2zfsymEcoDUho4w+UumTLyzO1XaPuLziF6Gkh\n96fhImmO6UApah5nc9iPbw9DPU8b/t9GQhJKH5erjrEO7ZeTBnzNaZJmSHEL\nc46byiJQ/o4Vf++DZxtlnSLKERG5gEFfXr//6kNhnVPax0i5zK/qgyowk+c+\nplMtodizTxgU/FDoK/2oVANLO5Tj8YU2Tj5sBUYoRthiKg0u3bri4ZkzRSms\nlaoZJsd+TL0ETi4tvtXXHcv6gjq6miyP0rBYnXl1Q1rp7Yro5xtC22ieg3S4\n8zHVv2Pf3LtuT4kS6m327jgsYq/BxCnGXb9L826ykt181aaag4F9EwxM8BwY\nH/1Z2xnAyE9sMTrCd7Z4btENxkXZKa5GVS44R9JoTge0GzaNc5Vkj+d00ccy\n7Zscuv908apzgigsMUNUfwdFtgtnuiSXfBHaW4G1E4KntPzOill1brgy0DMh\ngXn2\r\n=xRlE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVNbCRBKmrEJHER8BLYSXM1BSGkySLLZXJZksC2vJQ0AiEAmD1DAobR8bpUPMik31SJklhSqrKJrjuh/jG/yzkmhBI="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_8.0.2-21_1594811772237_0.40432116279007757"},"_hasShrinkwrap":false},"9.0.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.0.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@9.0.0","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-rd7TJwbdxgFUxQlX91NqpAIav6mggNoCcyjX8/jJpCNiMpmGYkFfJ/er5gVNf4VDVs7NaxyvKutWaDPwiX3+FQ==","shasum":"de9a25f1926c6789bbc50f1c1844104f9fc0e99d","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.0.0.tgz","fileCount":37,"unpackedSize":329180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHELtCRA9TVsSAnZWagAA6t0P/jW0Gsq4nwbCyMkC5Bi+\nsz+fBiEdMqFni1m6/xM4cnc/dDqYMJw0NZh5omiYmwMCqoU4offLlBG+0kEw\nACRbgZqlDuGlNzGr2eh2W5z5WN8K6uRPEuAt3bXbO4I6iZmlcSqHae/eifD2\nc+TPgx94tDlbWeyKXk5q41Db6q8Z1wzXFA9g9ykapTfIK4EgqotsyMPirpMh\nxWdjErMuV0K7tm9eEPkDdNUz2CgN8jFcaI1aFskDst2RY5aD/gW9lQygIVWP\nLfbgo8otyT63QS1bbkXoqbiWh6mLTrsfi4JKddFCaQhwT/FHyojl2a73DpDo\n/REBxCXpqxB25LHbNZQaG+qq8f821CAOPfiMUShYmuxswDP72vHcxtYL7CgX\njOJTb8KFxj4ljYY6T6IPFa9zSh3OKqv3laRDL1yr8pWk73Y0wKeQqfWmT1c2\nA9NYTCkDoPz8JuBdrUETKJOR6RkAQel6xXTVsXwHjzzK82YoOkO94PQvWdfp\nqg7vr5+CCoj/LmgDWPqRk3BLSl1wll5MqVGOwhalPwzk5LSNOBkjFw6ZmRaT\nbwlUQsSx1eOrzP7mgVyEJ7vBAOpQ85EqIV69Gh1F1CKVSLySIQyqhLEJ65eM\norsc7bO/kbiSeiPFe2oDOe5xLlmTJ/GLkeqLMgzgc3CwV/z7vAirGrg3cF42\nbqJ1\r\n=X+4o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH7AM2dl8y83h7QQvN/4TKWXCqxi+Z8P+lohM+0PBdEAIhAMIErKDEzX1T17filYp91HmHynXqFPc7qmp2/wPPIq2n"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.0.0_1595687660651_0.4413831325613278"},"_hasShrinkwrap":false},"9.0.1-beta.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.0.1-beta.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"readme":"

ng-lazyload-image

\n\n
\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n[![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![Build Status](https://github.com/tjoskar/ng-lazyload-image/workflows/Node%20CI/badge.svg)\n\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#libsetup)\n- [Usages](#usages)\n- [Debug](#debug)\n- [CSS](#css)\n- [API](#api)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake also sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE and want to use IntersectionObserver: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule], // <-- and include it\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollHooks`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nSee [hooks](#hooks) below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images:\n\n```javascript\n@Component({\n selector: 'image',\n template: `
`,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n\n```javascript\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `,\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\nThis will change the functionality of *when* we chek if the image is in the viewport. It does not change the functionality of *how* to detect if an image is in the viewport or not. Meaning: if you are using IntersectionObserver (default), it is important that the obserer that you pass to `customObservable` will emit objects that looks like: `{ isIntersecting: boolean }`. You can change this behavior by implementing your own `isVisible` (see [hooks](#hooks) below for more information).\n\nIf you are using the ScrollHooks-preset, you can just pass `customObservable` and the reset will be handle automatically.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🐛 Debug \n\nIn order to get a better understanding of what is happening you can pass `[debug]=\"true\"` which will output some debug information in the web console.\n\nSee [onStateChange](#onStateChange) for more information about the diffrent output messages.\n\n## 💅 CSS \n\nThe css class name `ng-lazyloading` will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.\n\nThe css class name `ng-lazyloaded` will be added when the image is loaded (regardless of if the image could be loaded or not).\n\nThe css class name `ng-failed-lazyloaded` will be added when the image couldn't be loaded.\n\n## 🔄 API \n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic. See [Custom Observable](#custom-observable) for more information.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image will be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n##### debug (optional)\n\ntype: `boolean`\n\nExaple: `true`\n\nSee [debug](#debug) for more information.\n\n### Events\n\n##### onStateChange (optional) \n\nType: `Function: (event: StateChange) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is getting into different state.\n\n```ts\nmyCallbackFunction(event: StateChange) {\n switch (event.reason) {\n case 'setup':\n // The lib has been instantiated but we have not done anything yet.\n break;\n case 'observer-emit':\n // The image observer (intersection/scroll/custom observer) has emit a value so we\n // should check if the image is in the viewport.\n // `event.data` is the event in this case.\n break;\n case 'start-loading':\n // The image is in the viewport so the image will start loading\n break;\n case 'mount-image':\n // The image has been loaded successfully so lets put it into the DOM\n break;\n case 'loading-succeeded':\n // The image has successfully been loaded and placed into the DOM\n break;\n case 'loading-failed':\n // The image could not be loaded for some reason.\n // `event.data` is the error in this case\n break;\n case 'finally':\n // The last event before cleaning up\n break;\n }\n}\n```\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nexport class LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...',\n },\n })\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nYou can even use other services by inject them. Lets say you want to use Angulars https class instead of `window.fetch`:\n\n```ts\nimport { NgModule, Injectable } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { HttpClientModule, HttpClient } from '@angular/common/http';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';\nimport { Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AppComponent } from './app.component';\n\n@Injectable()\nexport class LazyLoadImageHooks extends IntersectionObserverHooks {\n private http: HttpClient;\n\n constructor(http: HttpClient) {\n super();\n this.http = http;\n }\n\n loadImage({ imagePath }: Attributes): Observable {\n // Load the image through `HttpClient` and cancel the request if the user change page or the image gets removed\n return this.http.get(imagePath, { responseType: 'blob' }).pipe(map(blob => URL.createObjectURL(blob)));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, HttpClientModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport. It is important that the emited event is of the same type `isVisible` expects.\n\nEg.\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Will emit `{ isIntersecting: true }` every second.\n // You will have to overwride `isVisible` if you want to pass another event\n return interval(1000).pipe(mapTo({ isIntersecting: true })));\n }\n}\n```\n\nA more usefull example could be to add a debounce time so we only start loading the image if it has been in the view port for some time:\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\nimport { debounceTime } from 'rxjs/operators';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Only load the image if it has been in the viewport for one second\n return super.getObservable(attributes).pipe(debounceTime(1000))\n }\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts) for example.\n\nSee `isVisible` if you want to use your own event.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n\n```ts\nimport { Attributes, ScrollHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends ScrollHooks {\n isVisible(event: Event | string, { element, scrollContainer, offset }: Attributes) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\nIf you want to create your own event, you can create both `getObservable` and `isVisible` by extend `SharedHooks`:\n\n```ts\nimport { Attributes, SharedHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends SharedHooks {\n\n getObservable(attributes: Attributes) {\n return interval(1000);\n }\n\n isVisible(event: number, attributes: Attributes) {\n // `event` is 0,1,2,3,4,5,...\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath)\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes) {\n return [imagePath];\n }\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setLoadedImage({ element, imagePath }: Attributes) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n }\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setErrorImage({ element, errorImagePath }: Attributes) {\n element.src = errorImagePath;\n }\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setup(attributes: Attributes) {\n // Overwride the path to the default image for all lazyloaded images\n attributes.defaultImagePath = 'some/path.jpg';\n // You can always call the base `setup` if you want to keep the default behavior\n super.setup(attributes);\n }\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n finally(attributes: Attributes) {\n // So something\n }\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isBot(attributes: Attributes) {\n // Check if the user is a bot or not.\n this.navigator; // Is the same as `window.navigator` if window is defined otherwise undefined.\n isPlatformServer(this.platformId); // True if the code is running on the server\n }\n}\n```\n\nBoth `IntersectionObserverHooks` and `ScrollHooks` will load the image as soon as possble if `isBot` returns `true`.\n\n### isDisabled\n\nA function to decided if the module should be disabled, meaning: it should not do anything, just exit right away, without loading any image. The default behavior is to disable it on the server if the user is not a bot:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isDisabled() {\n // This is the same as: `return super.isDisabled();`\n return isPlatformServer(this.platformId) && !this.isBot();\n }\n}\n```\n\n### skipLazyLoading\n\nA function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\nOr maybe you want to load the image ASAP from specific domains\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n const imageUrl = new URL(attributes.imagePath);\n return imageUrl.hostname === 'example.org';\n }\n}\n```\n\nThe default behavior for `skipLazyLoading` is to call `isBot`. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.\n\n### onAttributeChange\n\nThis function is called when some of the atrebute of the image is changed.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n }\n}\n```\n\n### onDestroy\n\nThis function is called when a image is loaded and the directive will unmount, aka. when `ngOnDestroy` is called in the directive. This can be useful if you want to do some cleanup.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n imageToBeLoaded = new Map();\n\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n imageToBeLoaded.set(newAttributes.id, newAttributes);\n }\n\n onDestroy(attributes: Attributes) {\n imageToBeLoaded.delete(attributes.id);\n }\n}\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy by default:\n\n### Server side rendering (SSR)\n\nIf the incoming request is from a bot; it will set `[lazyLoad]` to `src` on the image (letting the browser loading the image right away). Useful if the bot don't understand javascript.\n\nIf the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).\n\nYou can chang this behavior by implementing your own `skipLazyLoading` function (see `skipLazyLoading` above). Let's say you always want to show the image ASAP for SSR, regardles of if the user is a bot or not:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n // Skipping lazyloading the image for SSR\n return isPlatformServer(this.platformId); \n }\n}\n```\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** You can either use the `getObservable` hook if you can trigger the loading outside the dom or you can use the `customObservable` input, see [Custom Observable](#custom-observable)\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener.\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** It doesn't work with `BrowserAnimationsModule`\n\n**A** Are you using the scroll preset? If so, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/438).\n\n**Q** Can I add a debounce time before loading the image?\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/456).\n\n**Q** Can I cancel image loading when the user change page?\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/458).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n","readmeFilename":"README.md","_id":"ng-lazyload-image@9.0.1-beta.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-MZpen2xCuJfDYItBo04HTkFQPZbrC+AFUaE88TeriSHBvopFvYgkWUE2DvCNZOnjKMmPKyHFS+djjmou8K2g3Q==","shasum":"9d3e9fcd6821e0587730906e741bbe3a174e2d62","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.0.1-beta.1.tgz","fileCount":37,"unpackedSize":332412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIILbCRA9TVsSAnZWagAAO/AP/RwYbpiUppVoK1FeDf90\n0ZJHWbucryBHQLVgdxnfQ+betmeFyjLld2Nt5+Q2L2YKYu2otc19nzmmbqG3\ndoCPylnP/5Ypd3PmQUxZyT2erZOtszUCGlMDQiAi8h1EbInqSNwbnmCdG3AQ\n+TYwUL98X7q3bGcCn4t/tUsC+yg3uJ6TmM2pE/QUyd4Nl22TTJ6TRC3KLHfh\nttnGpNZUXmSu3O/dMVp7EZwu4bnHRw/dAtWhsU8IHgb9cl0nwraca7tWgou2\nGbXPeDLy05C/uCKlpsuxBBZHa59ORnLzT6/IOvQImvbuRKP3kv9CaI4oDAKH\n6F5CYmrReZ4DpNXXuOBCV1Rn72j4dtV019QATDxP4PyI1lBbAVU+SzM4WkU9\nka7Zbx2v5EkjtpOmC/4TmTSLGYwiGDSgwfRG261srI6UW3QUyyZKzwL8WkCa\nfwfV05NJTF2R6/fsvZx/gQ9HN8umx/x/synSZM5FfYqijtpr5SwjhoCUJumW\nSfzLkJ0vDfruuF7FcpZpPbwUc9f262ckQQO36z4QfXGM3wTFrfYYvI/f9A4T\nVhyn7Rlhx+aeBhtyWum4sP02XGkj6uEh+8F1mwMYkoAHIVDDVcmDyv90Ubre\neL87DchUbS3EE8VesDrd9BpGBmcUM0GWSye+fbzd31G1VVJzV88aS/tXwAzI\nb6N3\r\n=WTga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQD4mZFKn3QgKhj9WtJcksnEiPmiOHjdfyU/q0yIrFOGmwIfZl8Jl2XK/ArTyWRQKyXWzCBPgeZO01ExP53bE72I8w=="}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.0.1-beta.1_1595966171132_0.5642447330558071"},"_hasShrinkwrap":false},"9.0.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.0.1","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@9.0.1","_nodeVersion":"12.8.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-E2lqcsRrK2hzPOm//3MM5iNYNEF5yFL4FKpuhALiIci1YZgsDdfPSbxfTIqXK6J57oy8x+X6/EKkQa9Yz1cU5g==","shasum":"034d2b9eee549e706ff1365de3ad0f651a921e08","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.0.1.tgz","fileCount":37,"unpackedSize":328517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR/G+CRA9TVsSAnZWagAAbTkP/A2T/5QNqVTK3iWpEcb9\n8Yq2HOZJCW4Vs/j2PuyKTszXfYA7ICU3ShiLgUQN8OcsPRByxRC/Sk5L46Sw\nNauG386aFAjGMsFIJm+q291KFPkFNlo+1zgod5fWOfQrGRERKH/QJ1JXAHIz\ndxCMdQ/qoERrRr4ni8pIicvqDAghxSwVAjKnFF7FuEfaTwCovaHn1nvP8JN1\ngg4yQ4HI1CuVEYmLyyiWvb0skatO43xZ7QvT8xX2dMhWSmAi/4cysxiYT4dA\ns9oxX5DXOA0v67MMzxg7NGh+AiWk2vpvHxH91WEI+Y0b9ljeFyjERrdlSVRK\neXhxXqwjKIW0JVAQA+7A8l3r6d2yUe0ZCpj6T9HcPiiy1nTFOrvrxCaS/JI1\n4aZi4x5DT9hj2clzwv87hgj+mkyE1nJPWM9jTnS5iAOFJpF/tHGxXJSPu5zM\n1lFxgIAh3wY+o+vw8h47XBVvI6aofzRon0wuSZhWG5tDqngP/oRfoc54/gQJ\nWSFG9tL1og9+5kzvfVBo1qYWI/ewqR1P/mRqbcjlV9L+L3LusDjsaNi8T9dB\nuUgQ7lDJxGXFic6nOTv6nqtNm5lI6gGRKu+vA296mps0cCw5HiA2kEEEwyq7\n13tfh6zAUH2zQOR950+dzNrl/omaZDVrtsrv49Y/YiC1eOg01fw3ebFcIx06\nhp9j\r\n=AwdH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbLUmfdeJzz7/Onui+Fn/pO636iSFtlKOuA8fgMOm55wIhAPx8os9mQiwIgpuudteKlx5jHmSN/dSe764JbwXZHOMc"}]},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.0.1_1598550462191_0.10162807109201277"},"_hasShrinkwrap":false},"9.0.2":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.0.2","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@9.0.2","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-VI4Ph9tYkpeKMHqjdiKyMyKK5QUQxMczmxX5UKFZCSY2lLMRF9majaaR0zuyY23X0unPtzsgVTZdJApRWpMSuw==","shasum":"36e52da3f935a868a0df1fb5fe78fa8007900e54","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.0.2.tgz","fileCount":37,"unpackedSize":329309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfr5uECRA9TVsSAnZWagAAdNEP+gPFmkTNjSryvZwBkmlI\nuwVprAlErMSWEHuHAP6VpEoYjjbHaYTb4Z1Wr0mrhNHRHcr4/tVAerVlcmuV\n/aNHyrZBd58QQUiIPTgbjMO1twiIdqz8oZDZM0mPZBrRam9DOggrSGLZTiFe\nuEfZZwlrph6gWU2IEl4DdasU6TtXZ8UysPGJHOGXFD2iLfd6x97zIwkcAXVG\nBMJeGGwUDdDggYDAyDltDJkHhz+A24dghLtbK99f5g88UDrsnmCUedGDqoyP\n+N9sUZK15WOIBTZ6PUDibg6uqcntZMRz6EKSGQhZC1Ala2ZI58KpKwrO8COd\nJkeHOo9s91+OPWMtsfAn8Xk9f5BSjn2eiNdLPhJHlXq/Vr3tW6NAXCxMTDfn\nADFlyWIlu0uaw/rpRA9z/pI6Kr5o7JOloIlQXSwg5Cpqzbz/DJGcZvLrEps5\n0y8aWD/v+ShV+WAmp5u+hsiZa2xigBf6HG3KM/8kPj0pChoy/SDtxibERU0B\nF+I9lnFixACsN6Axv6D9D6hidAwp6w39dy+cDKyP1PLsaOfV0AgWHU2U7Hbd\nGkimbgpint4/D4TJOFzj3gK371lpMLIdvpGPTaYUAsdEilgm/RlMSCHqCPzo\nW/IXfkxamDB3vgBK3aXjyZM3io2LU/Gldq3ISmdv7ZKL756RgOGgmTkNi1IO\nZ/1z\r\n=nSFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx7u4F2pRYtofq9ND02q7rUyVeWs5e4sEM8PVy97/hXgIhAK8TD4+hmm8L8ARKMEfMelo2sFOfjnJx3k4Kg3EJ0NDv"}]},"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.0.2_1605344131729_0.8715334453917145"},"_hasShrinkwrap":false},"9.1.0":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.1.0","description":"Lazy image loader for Angular > v2","main":"bundles/ng-lazyload-image.umd.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/core":">=8.0.0","@angular/common":">=8.0.0","rxjs":">=6.0.0"},"dependencies":{"tslib":"^2.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"module":"fesm2015/ng-lazyload-image.js","es2015":"fesm2015/ng-lazyload-image.js","esm2015":"esm2015/ng-lazyload-image.js","fesm2015":"fesm2015/ng-lazyload-image.js","typings":"ng-lazyload-image.d.ts","metadata":"ng-lazyload-image.metadata.json","sideEffects":false,"_id":"ng-lazyload-image@9.1.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ZdfCXMTaehfzxcSRRThpz9YZbEA+8LPA086Od6JiylrGj0yNM7Aq830A1x6NE/M8o2VuVq93emH9m8T6SFBHlA==","shasum":"2f887b85ef5829565a0fc875a66f568d7c3e2b32","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.0.tgz","fileCount":37,"unpackedSize":330043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfr6HjCRA9TVsSAnZWagAAC+wP/0bXUlcHx1woHTYIvOyk\nNaEUW7vEGD3YV8Jayk2WF6NZVUdjCTsjG+WkWvZ0LMxC5/256H4IkaRKO1GD\n+zjWYg+pHBidh3ywq9byNNoiQyZlewKwPtv+igGLb2eUJzhpQ09bLD880Oot\nXkExYvpMPfb0WCUL16bYI74zJr5sKdyn3om1k2hFJ6I3RcrcXF8RY3LN4e6y\nFIngcg5l2S30Cv+5v9cgWEefzipSbJqB3S86P2xR66CsJcsiEnxu1M2FAKZF\nNXtRh6OE51Vw5+brQt5VV4mTQNQFSvpN/KaRIXzdvfO8XOgowKun6co9a4OM\nl3Ww4muSoowwMaqFjCBSM1AN9pHUuwnaFkAU7LPYV96JkvXkcpoCC4+8cBtf\nOQlcmK8o9eyv7AMIRbWhORWbwcq57r41RtlFEh6Nx3xTUlVFGORnVatH1hgn\nt7lkd7n3opkDPUBb5XrAsLyprrdsnW0FQdTstuPqqehtIwfZpOOyteCTZ1mu\nIIcnwex7UtKdM7xtjqy+Wb5+sINK6mN4MDsPK+Lw9xgQ8I+cEpRXp/Oty5PL\nDZ9XPYx4PPnV/zY1zl937S9UNg8Cc1sjcwXBD9ANvylxlK1rvKR04YHf00ou\nLvT36q7us00VVoirSNS2MSAR/g42LNMTQxIHtGpzGYk6eNjZUBuvWoE4zlZo\n2+ej\r\n=3/pH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPs9B2Hvl/ZWEEmF+bMBpnEfiUrooh0mD5eCz3qZWftAiBuzbyyQWTCo3wySnpMsqBHwMopTY1mGp/vOzSbb6vgCA=="}]},"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.1.0_1605345762576_0.2787150029822174"},"_hasShrinkwrap":false},"9.1.1":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.1.1","description":"Lazy image loader for Angular > v2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/common":">=11.0.0","@angular/core":">=11.0.0","rxjs":">=6.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"volta":{"node":"16.13.1"},"module":"fesm2015/ng-lazyload-image.mjs","es2020":"fesm2020/ng-lazyload-image.mjs","esm2020":"esm2020/ng-lazyload-image.mjs","fesm2020":"fesm2020/ng-lazyload-image.mjs","fesm2015":"fesm2015/ng-lazyload-image.mjs","typings":"ng-lazyload-image.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./ng-lazyload-image.d.ts","esm2020":"./esm2020/ng-lazyload-image.mjs","es2020":"./fesm2020/ng-lazyload-image.mjs","es2015":"./fesm2015/ng-lazyload-image.mjs","node":"./fesm2015/ng-lazyload-image.mjs","default":"./fesm2020/ng-lazyload-image.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"7535f86453ebd8ab18867c4082b63886f9de6145","_id":"ng-lazyload-image@9.1.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-s/cVUosywDSTNnxkz6hF+wEsbhxE/i6psNi8eiujtPMPWRS5iLSJFki40JidBan/IEvxm48mvMwUN1TVA+RUgw==","shasum":"22f457b65629ba43e1c1ea1eab6c678f647e1ba1","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.1.tgz","fileCount":34,"unpackedSize":217089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh02hdCRA9TVsSAnZWagAAbNQQAIcLP0adccMEaLr0FvQK\n/Hvekjj36F7sSlRgZLLANha2KCDuK7Ea83ZUXN6bxsko2DpyeCVe9das0JMk\n9IaF5m2OF/eG1c/QbMZmnsedDWbmkVM40KqoKb+pEFzygyiBSyKvLcZcC5PL\nJppG3OAQB5gMAz/VpzRBNeYJdqEokdqqKWO2UyBbGtWdbPSvWWObYG3ykD7a\nrOH2V69xRgijohfW9q95+6cQsstIcqJhINSXnyNZCnDNhyryJFXKRzxYn+JW\nDXhqQN+YPwK1jFVoWQ7zvXXSNQkLHpJK+E7jmohXi/omc41fXuxe+JE12CoL\n0HhgiKAFmAcswVKpoeiK57WT1a+LxwuXEqBAOc+lxAzmORoTjqWmGhoIFopD\nLJF91lRniqaH+H6Rt0oLAkgwkArnFY2fCa44ug3RHkEnLzOESYm9VlnT0jUB\nsRHh6lUQkgzbgH39xJzjKKJslUX4VtfwgSgMdPcKev6D8PNm+Jat5AP1hvqC\nzsNAY1inLsHBCAEQxzh8A/u7UxAr69z8sdA1x8Hy2/zTrsgKH+QDR2VZhnTG\nqwhbkHtZmFWBCQIrCRVJ7fpN8dMx8BSwdVlhuJ/oW/vhG1oYutcRa0PWsPbc\naw7ni7NdzMGtqKKrk9Qhd/rBiWtEhUMypUre9JnnJ18Jnay4QBgJ2M56vsxI\nuw6m\r\n=LwZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqm0pXBSgpQPaCvOAcqnNtfUA1GaOnrluc+QH9c2Cj4AiBH84ILB9oL2fs2LOgu2RuAJP2Njbf9tB4Yp2rMITDW2Q=="}]},"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.1.1_1641244765605_0.47724385594928975"},"_hasShrinkwrap":false},"9.1.2":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.1.2","description":"Lazy image loader for Angular > v2","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/common":">=11.0.0","@angular/core":">=11.0.0","rxjs":">=6.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"volta":{"node":"16.13.1"},"module":"fesm2015/ng-lazyload-image.mjs","es2020":"fesm2020/ng-lazyload-image.mjs","esm2020":"esm2020/ng-lazyload-image.mjs","fesm2020":"fesm2020/ng-lazyload-image.mjs","fesm2015":"fesm2015/ng-lazyload-image.mjs","typings":"ng-lazyload-image.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./ng-lazyload-image.d.ts","esm2020":"./esm2020/ng-lazyload-image.mjs","es2020":"./fesm2020/ng-lazyload-image.mjs","es2015":"./fesm2015/ng-lazyload-image.mjs","node":"./fesm2015/ng-lazyload-image.mjs","default":"./fesm2020/ng-lazyload-image.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"064d647740edfb3778bd6486fd721581cac5cb2e","_id":"ng-lazyload-image@9.1.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-E5oz5HdTRtYW/TH+jceT4VMcRXKdX9Ut82eEwt2K0/bFAXKU14HluCFa8cMidPBgSa08Mlf+gmoKCTvAfUPgag==","shasum":"5a3e341341bb802114b7e7ccad816af164fb92f6","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.2.tgz","fileCount":34,"unpackedSize":217067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4sALCRA9TVsSAnZWagAARJYP/0Mnj/650AcjyQppZvLE\nESNIM2q1nF2HtH0JiCt41fO4mKMYDN6AyFMXjz5VI3F9sKf3jm6mnh/lRKpB\n2KO/lm1U6NSMhW/1+BWDhddwmmx9D5yrSU7fQ5jeNQczpEJIqmWKF5IJYAlf\nBoX5gJxD9iNPkbYTBzgSCsuzF5RzrzVU41vDHt2NFG3cXleugaCGmSc+MABT\n+ceYtrqr3vaZL4BegrNtmXpB9FVxTfEeOJVLnx+xbJMg2JYMHiOxXcMUztoD\nXllHRUc+mwH9DIWncGzDbjNqeGZQ7k1dgxyrRllQ3Hm4X14MSFk9RgCSVMgL\nb6Onf+NbntOlLrsd67vIxySU2zzNSwtJ1+7oCP5w0S60Izjk3Uu+JXxKnriv\ndTuHvN/EosWJRmmDNADgp22g6zwKJjLkreFVAm8WxFZFHp3OD9fKZVNdP+i+\nzDm6SSlOwEWXG46jzmMoChhvk+e01Y5gjBH8x8aZBRP39uEB4jYVBHoFUPPC\nQang8GbNA600HV4eGJONdOsj7vMVW+wKEX/AJxT+MiSRjAzV3ybxgJOVQ9N0\nCJy9MH9ESxVFhfgqBfaa1d5tBvRtBw2J2v6ugt22yR4rVvz8CkkHwE3BVobt\nC+jQ/kLDvZL5iX57AN5fwo4I9SA7ackLiMIQDrFyWbTCBtD4SfBiH9RIUqOL\ntRLC\r\n=ex0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGv1AZjBL49p/IzrGUF7PyEHi9lHf5FTtFGq0uIzEjVqAiEA5Sk35QRFyCycAapI6MaxzOgOtZSsnFE/nAtAaAyF8iU="}]},"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.1.2_1642250251660_0.3554166923588318"},"_hasShrinkwrap":false},"9.1.3":{"$schema":"./node_modules/ng-packagr/package.schema.json","name":"ng-lazyload-image","version":"9.1.3","description":"Lazy image loader for Angular > v2","repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"keywords":["lazy-load","lazy-image","angular"],"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"license":"MIT","bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","peerDependencies":{"@angular/common":">=11.0.0","@angular/core":">=11.0.0","rxjs":">=6.0.0"},"gitmoji":{"blacklist":["rocket","tada","apple","penguin","checkered-flag","robot","green-apple","construction-worker","chart-with-upwards-trend","whale","globe-with-meridians","hankey","package","bento","wheelchair","beers","speech-balloon","card-file-box","loud-sound","mute","children-crossing","iphone"]},"volta":{"node":"16.13.1"},"module":"fesm2015/ng-lazyload-image.mjs","es2020":"fesm2020/ng-lazyload-image.mjs","esm2020":"esm2020/ng-lazyload-image.mjs","fesm2020":"fesm2020/ng-lazyload-image.mjs","fesm2015":"fesm2015/ng-lazyload-image.mjs","typings":"ng-lazyload-image.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./ng-lazyload-image.d.ts","esm2020":"./esm2020/ng-lazyload-image.mjs","es2020":"./fesm2020/ng-lazyload-image.mjs","es2015":"./fesm2015/ng-lazyload-image.mjs","node":"./fesm2015/ng-lazyload-image.mjs","default":"./fesm2020/ng-lazyload-image.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"d594bbed51c9bcc05bce719845ff73a5b003dbab","_id":"ng-lazyload-image@9.1.3","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-GlajmzbKhQCvg9pcrASq4fe/MNv9KoifGe6N+xRbseaBrNj2uwU4Vwic041NlmAQFEkpDM1H2EJCAjjmJeF7Hg==","shasum":"002432ec2532c8b4af3f936be3df32ef7b32df56","tarball":"https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.3.tgz","fileCount":34,"unpackedSize":217129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuYtKREs4DN0BJbOjlYy4CAGGFS0iPaz706vzukVxmfAIgQxnrT2K97lhR1Pbg8CClHO0K2/AfXYSYspEhGRPcgTo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiixSCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFkQ/9F470FMCUkqpBk/55fh/FbP2Ev2TPiIye6CMSsMrqgW+sf+e9\r\n4dfw3VeMPFjFExD0gY4wP9wCZRZddab4xeChnFh1iCcXneyhJNHmahF7szDq\r\nvsR2Kt/XZgq6HgugbDw1l4Z+xf7KLg8SYdC+7xgrhY6wA8wFcVEVAequGDAM\r\n5STg/oemkMNCsOI6SX5NOWtb0WE8yJfWDSJ0CQmLUGVaZJUG/BQOriYMxyzT\r\n1rZ1pavSKEkUqgRU4vCUr51id64JaYGtCMIsqxZxKpSEtCSaMM9CxEVaSgaf\r\nXzSt3/6VEjpl49ilVg8AT/N3u+8sbGOwmj6VuAE3FbyX31GVl9I6+biyS4GQ\r\nJYSmgOYO4nExkVcczHI4Ipg1L8+F7YdAr7EJtSbObLpzkYXdQt+DmZ4x9YQS\r\nOnZ/UjdJ3tNv0NhRaHmY2hvRiEswNJjlBr/15HikJPAlA+ITve2FfHvRjeUK\r\nOT1DfczsBEsw4VP5EJ30w6l2w6I0v6TgMslwJEDZRd5fuy7bLhcvHjtdHF66\r\nL7m8yMVNP3QNlRnuXi2q0Gx+T9IbtfOtlKHg6d9qCbBEClwBE6JR50SiqwjV\r\nBn6cin4B37dpk88S8UlUU0KEFkBZyEcnuNaUkEPHY7LFgcQiuQwlJw3qJYdY\r\ngK7bRgC7LrUy6uP+OB0DWLJWr+tOZvCjawk=\r\n=v80Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"},"directories":{},"maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-lazyload-image_9.1.3_1653281922419_0.0016586446740909366"},"_hasShrinkwrap":false}},"readme":"

ng-lazyload-image

\n\n
\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n![npm](https://img.shields.io/npm/dw/ng-lazyload-image.svg)\n[![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![Build Status](https://github.com/tjoskar/ng-lazyload-image/workflows/Node%20CI/badge.svg)\n\n
\n\n

\n A super small libary for lazy loading images for Angular apps with zero dependencies\n

\n\n## 📝 Table of Contents\n\n- [Demo](#demo)\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#libsetup)\n- [Usages](#usages)\n- [Debug](#debug)\n- [CSS](#css)\n- [API](#api)\n- [Hooks](#hooks)\n- [Search Engine Optimization (SEO)](#seo)\n- [FAQ](#faq)\n- [Contributing](#contributing)\n\n## 🤯 Demo \n\nVisit this site: https://naughty-bose-ec1cfc.netlify.com\n\n## ✅ Prerequisites \n\nThe browser you are targeting need to have support of `WeakMap` and `String.prototype.includes`. If you need to support an older browser (like IE) you will need to include polyfill for `WeakMap` and `String.prototype.includes` (see https://github.com/zloirock/core-js for example).\n\nMake also sure to inclue a pollyfill for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if you need to target IE and want to use IntersectionObserver: https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## ⬇️ Install \n\nTo install the package, just run:\n\n```\n$ npm install ng-lazyload-image\n```\n\nor the following if you are using yarn\n\n```\n$ yarn add ng-lazyload-image\n```\n\n## 🛠 Setup \n\nInclude the library in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app/app.module.ts)):\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule], // <-- and include it\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\n### IntersectionObserver\n\n`ng-lazyload-image` is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.\n\n### Scroll listener\n\nYou can easily swtich from IntersectionObserver to scroll listener by using the `scrollHooks`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }], // <-- Declare that you want to use ScrollHooks\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nSee [hooks](#hooks) below for more information.\n\n## 🖼 Usages \n\nA simple usecase is to use a `img`-tag and give it the image to lazyload to `[lazyLoad]` and an optional default image to `[defaultImage]`. The default image will be shown while the \"real\" image is getting loaded.\n\nExample:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Background images\n\nIt also supports background images:\n\n```javascript\n@Component({\n selector: 'image',\n template: `
`,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';\n}\n```\n\n### Responsive images\n\nIf using responsive images in a plain `` tag, you'll need to set the `useSrcset` attribute to `true`:\n\n```javascript\n@Component({\n selector: 'image',\n template: ` `,\n})\nclass ImageComponent {\n defaultImage = 'https://www.placecage.com/1000/1000';\n images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,\n https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;\n}\n```\n\nIf using responsive images in a `` tag, set the default `` tag as usual with `lazyLoad` etc. attributes. \nYou can use `attr.lazyLoad`, `attr.defaultImage` and `attr.errorImage` attributes for `` elements. \nThere's no need to set `useSrcset` for `` elements, as `srcset` is used by default. \nA simple example for a `` tag:\n\n```javascript\n@Component({\n selector: 'image',\n template: `\n \n \n \n \n \n `,\n})\nclass ImageComponent {\n screen_lg = '1200px';\n screen_md = '992px';\n defaultImage = 'https://www.placecage.com/1000/1000';\n image1 = 'https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg';\n image2 = 'https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg';\n image3 = 'https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg';\n}\n```\n\n### Loading image path async\n\nYou can load image async or change the url on the fly, eg.\n\n```html\n\n```\n\n### Custom observable\n\nSometimes you want to get more controll over when the we should check if the image is in viewport. `customObservable` let's you create your own observable.\n\nThis will change the functionality of *when* we chek if the image is in the viewport. It does not change the functionality of *how* to detect if an image is in the viewport or not. Meaning: if you are using IntersectionObserver (default), it is important that the obserer that you pass to `customObservable` will emit objects that looks like: `{ isIntersecting: boolean }`. You can change this behavior by implementing your own `isVisible` (see [hooks](#hooks) below for more information).\n\nIf you are using the ScrollHooks-preset, you can just pass `customObservable` and the reset will be handle automatically.\n\n```ts\nimport { merge, fromEvent } from 'rxjs'\n\n...\n\nconstructor() {\n this.scroll$ = merge(\n fromEvent(window, 'scroll'),\n fromEvent(someDivRef, 'scroll')\n );\n}\n```\n\n```html\n\n```\n\n### Ionic\n\nIf you are using Ionic and **don't** want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\nIn case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.\n\n```javascript\n@Component({\n selector: 'page-image',\n template: `\n \n \n \n `,\n})\nexport class AboutPage {\n lazyLoadImage = 'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5';\n}\n```\n\n## 🐛 Debug \n\nIn order to get a better understanding of what is happening you can pass `[debug]=\"true\"` which will output some debug information in the web console.\n\nSee [onStateChange](#onStateChange) for more information about the diffrent output messages.\n\n## 💅 CSS \n\nThe css class name `ng-lazyloading` will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.\n\nThe css class name `ng-lazyloaded` will be added when the image is loaded (regardless of if the image could be loaded or not).\n\nThe css class name `ng-failed-lazyloaded` will be added when the image couldn't be loaded.\n\n## 🔄 API \n\n##### lazyLoad\n\nType: `string`\n\nExample: `https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg`\n\nThe image to be lazy loaded. This image will replace the default image (`defaultImage`).\n\n```html\n\n```\n\n##### defaultImage (optional)\n\nType: `string`\n\nExample: `https://www.placecage.com/1000/1000`\n\nPath to default image. This image will be loaded right away.\n\nYou can also use `src` attribute for img tag to define default image: \n``\n\nor `background-image` property for non-image tags: \n`
`\n\n##### errorImage (optional)\n\nType: `string`\n\nExample: `https://i.imgur.com/XkU4Ajf.png`\n\nAn image to be loaded if failing to load `lazyLoad`. Will load the default image (`defaultImage`) if absent.\n\n```html\n\n```\n\n##### offset (optional)\n\nType: `number`\n\nExample: `100`\n\nDefault: `0`\n\nNumber of px a image should be loaded before it is in view port\n\n```html\n\n```\n\n##### scrollTarget (optional)\n\nType: `Element`\n\nExample: `document.getElementById('my-scroll-container')`\n\nDefault: `window`\n\nYou will need to set this property if you are using a scroll container and do not propagate the scroll event to window.\n\n##### customObservable (optional)\n\nType: `Observable`\n\nExample: `Observable.fromEvent(myScrollContainer, 'scroll')`\n\nYou can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic. See [Custom Observable](#custom-observable) for more information.\n\n##### useSrcset (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true` if you need to lazy load images with `srcset` attribute, instead of `src`. \n`` tags are set to use `srcset` by default, so you don't need to set this option additionaly.\n\n##### decode (optional)\n\nType: `boolean`\n\nExample: `true`\n\nYou can set this to `true`, the image will be [decoded](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) before inserted into the DOM. This can be useful for large images.\n\n##### debug (optional)\n\ntype: `boolean`\n\nExaple: `true`\n\nSee [debug](#debug) for more information.\n\n### Events\n\n##### onStateChange (optional) \n\nType: `Function: (event: StateChange) => void`\n\nExample: ``\n\nYou can pass a callback function, which will be called when the image is getting into different state.\n\n```ts\nmyCallbackFunction(event: StateChange) {\n switch (event.reason) {\n case 'setup':\n // The lib has been instantiated but we have not done anything yet.\n break;\n case 'observer-emit':\n // The image observer (intersection/scroll/custom observer) has emit a value so we\n // should check if the image is in the viewport.\n // `event.data` is the event in this case.\n break;\n case 'start-loading':\n // The image is in the viewport so the image will start loading\n break;\n case 'mount-image':\n // The image has been loaded successfully so lets put it into the DOM\n break;\n case 'loading-succeeded':\n // The image has successfully been loaded and placed into the DOM\n break;\n case 'loading-failed':\n // The image could not be loaded for some reason.\n // `event.data` is the error in this case\n break;\n case 'finally':\n // The last event before cleaning up\n break;\n }\n}\n```\n\n## 🎣 Hooks \n\nIt is possible to hook into the loading process by create your own functions.\n\nFor example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';\nimport { AppComponent } from './app.component';\n\nexport class LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return fetch(imagePath, {\n headers: {\n Authorization: 'Bearer ...',\n },\n })\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nYou can even use other services by inject them. Lets say you want to use Angulars https class instead of `window.fetch`:\n\n```ts\nimport { NgModule, Injectable } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { HttpClientModule, HttpClient } from '@angular/common/http';\nimport { LazyLoadImageModule, IntersectionObserverHooks, Attributes, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';\nimport { Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AppComponent } from './app.component';\n\n@Injectable()\nexport class LazyLoadImageHooks extends IntersectionObserverHooks {\n private http: HttpClient;\n\n constructor(http: HttpClient) {\n super();\n this.http = http;\n }\n\n loadImage({ imagePath }: Attributes): Observable {\n // Load the image through `HttpClient` and cancel the request if the user change page or the image gets removed\n return this.http.get(imagePath, { responseType: 'blob' }).pipe(map(blob => URL.createObjectURL(blob)));\n }\n}\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, HttpClientModule, LazyLoadImageModule],\n providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],\n bootstrap: [AppComponent],\n})\nexport class MyAppModule {}\n```\n\nThe following hooks are supported:\n\n### getObservable\n\nShould return an observable that emits a new value every time `ng-lazyload-image` should check if the image is in viewport. It is important that the emited event is of the same type `isVisible` expects.\n\nEg.\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Will emit `{ isIntersecting: true }` every second.\n // You will have to overwride `isVisible` if you want to pass another event\n return interval(1000).pipe(mapTo({ isIntersecting: true })));\n }\n}\n```\n\nA more usefull example could be to add a debounce time so we only start loading the image if it has been in the view port for some time:\n\n```ts\nimport { Attributes, IntersectionObserverHooks } from 'ng-lazyload-image';\nimport { debounceTime } from 'rxjs/operators';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n getObservable(attributes: Attributes) {\n // Only load the image if it has been in the viewport for one second\n return super.getObservable(attributes).pipe(debounceTime(1000))\n }\n}\n```\n\nSee [intersection-listener.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts) for example.\n\nSee `isVisible` if you want to use your own event.\n\n### isVisible\n\nFunction to check if the element is vissible.\n\nEg.\n\n```ts\nimport { Attributes, ScrollHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends ScrollHooks {\n isVisible(event: Event | string, { element, scrollContainer, offset }: Attributes) {\n // `event` is form `getObservable`\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\nIf you want to create your own event, you can create both `getObservable` and `isVisible` by extend `SharedHooks`:\n\n```ts\nimport { Attributes, SharedHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends SharedHooks {\n\n getObservable(attributes: Attributes) {\n return interval(1000);\n }\n\n isVisible(event: number, attributes: Attributes) {\n // `event` is 0,1,2,3,4,5,...\n return isElementInViewport(element, scrollContainer, offset);\n }\n}\n```\n\n### loadImage\n\nFunction to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes): Promise {\n return await fetch(imagePath)\n .then((res) => res.blob())\n .then((blob) => URL.createObjectURL(blob));\n }\n}\n```\n\nIf you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):\n\n```ts\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n loadImage({ imagePath }: Attributes) {\n return [imagePath];\n }\n}\n```\n\n### setLoadedImage\n\nA function to set the image url to the DOM.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setLoadedImage({ element, imagePath }: Attributes) {\n // `imagePath` comes from `loadImage`\n element.src = imagePath;\n }\n}\n```\n\n### setErrorImage\n\nThis function will be called if the lazy image cant be loaded.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setErrorImage({ element, errorImagePath }: Attributes) {\n element.src = errorImagePath;\n }\n}\n```\n\n### setup\n\nThis function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.\n\nThis function will be called every time an attrebute is changing.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n setup(attributes: Attributes) {\n // Overwride the path to the default image for all lazyloaded images\n attributes.defaultImagePath = 'some/path.jpg';\n // You can always call the base `setup` if you want to keep the default behavior\n super.setup(attributes);\n }\n}\n```\n\n### finally\n\nThis function will be called on teardown. Can be useful for setting css-classes.\n\nEg.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n finally(attributes: Attributes) {\n // So something\n }\n}\n```\n\n### isBot\n\nA function to check if the current user is a bot or not. Can be useful for SSR and SEO.\n\nDefault function:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isBot(attributes?: Attributes) {\n // Check if the user is a bot or not.\n this.navigator; // Is the same as `window.navigator` if window is defined otherwise undefined.\n isPlatformServer(this.platformId); // True if the code is running on the server\n }\n}\n```\n\nBoth `IntersectionObserverHooks` and `ScrollHooks` will load the image as soon as possble if `isBot` returns `true`.\n\n### isDisabled\n\nA function to decided if the module should be disabled, meaning: it should not do anything, just exit right away, without loading any image. The default behavior is to disable it on the server if the user is not a bot:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n isDisabled() {\n // This is the same as: `return super.isDisabled();`\n return isPlatformServer(this.platformId) && !this.isBot();\n }\n}\n```\n\n### skipLazyLoading\n\nA function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n return isPlatformServer(this.platformId); \n }\n}\n```\n\nOr maybe you want to load the image ASAP from specific domains\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n const imageUrl = new URL(attributes.imagePath);\n return imageUrl.hostname === 'example.org';\n }\n}\n```\n\nThe default behavior for `skipLazyLoading` is to call `isBot`. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.\n\n### onAttributeChange\n\nThis function is called when some of the atrebute of the image is changed.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n }\n}\n```\n\n### onDestroy\n\nThis function is called when a image is loaded and the directive will unmount, aka. when `ngOnDestroy` is called in the directive. This can be useful if you want to do some cleanup.\n\n```ts\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n imageToBeLoaded = new Map();\n\n onAttributeChange(newAttributes: Attributes) {\n console.log(`New attributes: ${newAttributes}`);\n imageToBeLoaded.set(newAttributes.id, newAttributes);\n }\n\n onDestroy(attributes: Attributes) {\n imageToBeLoaded.delete(attributes.id);\n }\n}\n```\n\n## 🔎 Search Engine Optimization (SEO) \n\n`ng-lazyload-image` are using the following strategy by default:\n\n### Server side rendering (SSR)\n\nIf the incoming request is from a bot; it will set `[lazyLoad]` to `src` on the image (letting the browser loading the image right away). Useful if the bot don't understand javascript.\n\nIf the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).\n\nYou can chang this behavior by implementing your own `skipLazyLoading` function (see `skipLazyLoading` above). Let's say you always want to show the image ASAP for SSR, regardles of if the user is a bot or not:\n\n```ts\nimport { isPlatformServer } from '@angular/common';\nimport { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';\n\nclass LazyLoadImageHooks extends IntersectionObserverHooks {\n skipLazyLoading(attributes: Attributes) {\n // Skipping lazyloading the image for SSR\n return isPlatformServer(this.platformId); \n }\n}\n```\n\n### Client side\n\n- If the user is a bot (see `isBot` hook above), render all the images right away. (useful if the bot understand javascript)\n- If the user is not a bot (or if we can't decide), lazy load the images\n\n## 🤔 FAQ \n\n**Q** How can I manually trigger the loading of images?\n\n**A** You can either use the `getObservable` hook if you can trigger the loading outside the dom or you can use the `customObservable` input, see [Custom Observable](#custom-observable)\n\n**Q** Does this library work with ionic or some other wrapper for Angular?\n\n**A** Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener.\n\n**Q** How can I add a transition effect between the default image and the lazy loaded image?\n\n**A** See: https://github.com/tjoskar/ng-lazyload-image/issues/300\n\n**Q** It doesn't work with `BrowserAnimationsModule`\n\n**A** Are you using the scroll preset? If so, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/438).\n\n**Q** Can I add a debounce time before loading the image?\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/456).\n\n**Q** Can I cancel image loading when the user change page?\n\n**A** Yes, take a look at this [issue](https://github.com/tjoskar/ng-lazyload-image/issues/458).\n\n**Q** I can't get it to work. Can you help me?\n\n**A** Sure, create an issue and describe your issue in as much detail as possible.\n\n## 🙇‍ Contributing \n\nSee the [contributing guide](CONTRIBUTING.md)\n","maintainers":[{"name":"tjoskar","email":"mr.karlsson.oskar@gmail.com"}],"time":{"modified":"2022-06-21T03:58:55.296Z","created":"2017-03-25T13:16:33.002Z","3.0.0":"2017-03-25T13:16:33.002Z","3.1.0":"2017-04-02T07:23:54.157Z","3.1.1":"2017-05-11T18:15:35.746Z","3.2.0":"2017-07-18T18:02:03.751Z","3.2.1-beta.0":"2017-07-20T07:32:06.460Z","3.2.1":"2017-07-20T16:05:52.546Z","3.2.2":"2017-07-24T07:31:59.539Z","3.2.3":"2017-08-13T17:03:36.242Z","3.3.0":"2017-08-19T09:13:24.441Z","3.3.1":"2017-08-19T09:22:27.160Z","3.3.2":"2017-09-07T12:42:21.375Z","3.3.3":"2017-09-29T13:23:40.204Z","3.3.4":"2017-11-05T17:31:35.771Z","3.3.5":"2017-11-12T15:15:46.740Z","3.3.6":"2017-12-02T18:34:40.417Z","3.4.0":"2018-01-01T10:35:01.573Z","3.4.1":"2018-01-07T08:50:17.959Z","3.4.2":"2018-01-09T20:17:13.652Z","4.0.0":"2018-05-19T17:05:22.447Z","4.1.0-beta.0":"2018-11-02T10:08:08.562Z","4.1.0":"2018-11-07T09:55:32.005Z","5.0.0-beta.0":"2018-11-07T10:44:19.502Z","5.0.0":"2018-11-07T11:56:41.419Z","4.2.0":"2019-02-27T15:56:25.968Z","5.1.0":"2019-02-27T16:01:19.713Z","5.1.1":"2019-03-06T13:23:25.309Z","5.1.2":"2019-04-03T06:46:07.120Z","6.0.0-0":"2019-06-27T09:56:12.582Z","6.0.0":"2019-06-27T11:46:00.618Z","6.1.0-0":"2019-08-06T13:52:45.176Z","6.1.0":"2019-08-07T09:03:06.937Z","7.0.0":"2019-10-15T19:09:08.337Z","7.0.1-0":"2019-10-22T08:26:13.079Z","7.0.1":"2019-10-22T14:09:46.807Z","7.0.2-0":"2019-11-01T10:23:54.226Z","7.1.0":"2020-02-22T16:32:31.655Z","8.0.0-beta.1":"2020-05-24T13:05:11.496Z","8.0.0-beta.2":"2020-05-24T14:48:18.831Z","8.0.0":"2020-05-29T09:35:11.031Z","8.0.1":"2020-05-29T13:07:20.314Z","8.0.2-21":"2020-07-15T11:16:12.378Z","9.0.0":"2020-07-25T14:34:20.759Z","9.0.1-beta.1":"2020-07-28T19:56:11.284Z","9.0.1":"2020-08-27T17:47:42.350Z","9.0.2":"2020-11-14T08:55:31.878Z","9.1.0":"2020-11-14T09:22:42.745Z","9.1.1":"2022-01-03T21:19:25.789Z","9.1.2":"2022-01-15T12:37:31.934Z","9.1.3":"2022-05-23T04:58:42.593Z"},"homepage":"https://github.com/tjoskar/ng-lazyload-image#readme","keywords":["lazy-load","lazy-image","angular"],"repository":{"type":"git","url":"git+https://github.com/tjoskar/ng-lazyload-image.git"},"author":{"name":"Oskar Karlsson","email":"kontakta@oskarkarlsson.nu"},"bugs":{"url":"https://github.com/tjoskar/ng-lazyload-image/issues"},"license":"MIT","readmeFilename":"README.md","users":{"jcdsr3":true,"tommyldunn":true,"okmogwai":true,"dnarvaez":true,"mat3o":true}}