js不需要知道圖片寬高的懶加載方法(經過實際測試,不加寬高仍然是無法正常加載的,設置height:auto,height:100%,仍然顯示高度為0)


js不需要知道圖片寬高的懶加載方法

懶加載是如何實現的? - 簡書
https://www.jianshu.com/p/e86c61468285
找到一個不需要知道圖片寬高的懶加載方法了(經過實際測試,不加寬高仍然是無法正常加載的,設置height:auto,height:100%,仍然顯示高度為0

dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
這個兼容性比較好

<script type="text/javascript" src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
How to lazyload
Add blazy.js to your website
Add the 'b-lazy' class to the elements that should be lazy loaded
Initialize blazy whenever you're ready
var bLazy = new Blazy({
// Options
});

<img class="b-lazy" data-src="image.jpg" />

http://dinbror.dk/blazy/examples/?ref=github#image

注:vuejs,react有對應的懶加載插件

twobin/react-lazyload: Lazy load your component, image or anything matters the performance.
https://github.com/twobin/react-lazyload

vue插件地址:https://github.com/hilongjw/vue-lazyload

demo:http://hilongjw.github.io/vue-lazyload/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM