带加载进度的Web图片懒加载组件Lazyload

zhoutk 发布于2019-08-02 10:17 / 2505人阅读

摘要：是一个文件大小仅的图片懒加载组件不依赖其它第三方库，组件会根据用户当前浏览的区域去自动加载对应的图片用户还没有浏览的区域图片则不会进行加载。允许图片加载之前，指定一张相对较小的封面图。当原图加载完成之后则会覆盖封面图片。

在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，还会影响用户浏览体验。

Lazyload 是一个文件大小仅4kb的图片懒加载组件（不依赖其它第三方库），组件会根据用户当前浏览的区域去自动加载对应的图片（用户还没有浏览的区域图片则不会进行加载）。

Lazyload 允许图片加载之前，指定一张相对较小的封面图。组件会优先加载封面图片，以优化用户浏览感受。当原图加载完成之后则会覆盖封面图片。

除此之外，Lazyload 还能获取到当前图片的加载进度。

效果演示

Lazyload Demo - default

Lazyload Demo - custom tips

如何使用？

2.1 Html

html set the data-src property.

data-cover is not necessary

2.2 Import ./dist/Lazyload.js file to the page

let Lazyload = require("./dist/Lazyload.js");

2.3 Initialization

//Get elements
var eList = [];
eList.push.apply(eList, document.getElementsByClassName("img"));
eList.push.apply(eList, document.getElementsByClassName("imgBg"));

//Create Lazy
var lazy = new Lazyload({
    obj:eList,          //elements
    range:200           //Extra range
});

// //custom tips
// lazy.tips = function(obj){
//     var e = obj.o,                    //element
//         schedule = obj.schedule;      //load schedule
//     console.log(e,schedule);
// };

//Init
lazy.init();

GPU云服务器云服务器 js实现数据的懒加载图片 js图片懒加载懒加载懒加载异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52249.html

带加载进度的Web图片懒加载组件Lazyload

摘要：是一个文件大小仅的图片懒加载组件不依赖其它第三方库，组件会根据用户当前浏览的区域去自动加载对应的图片用户还没有浏览的区域图片则不会进行加载。允许图片加载之前，指定一张相对较小的封面图。当原图加载完成之后则会覆盖封面图片。在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，还会影响用户浏览体验。 Lazyload 是一个文件大小仅4kb的图片懒加载组件（不依赖其...

JerryWangSAP 2019-08-22 16:40 评论0 收藏0
带加载进度的Web图片懒加载组件Lazyload

摘要：是一个文件大小仅的图片懒加载组件不依赖其它第三方库，组件会根据用户当前浏览的区域去自动加载对应的图片用户还没有浏览的区域图片则不会进行加载。允许图片加载之前，指定一张相对较小的封面图。当原图加载完成之后则会覆盖封面图片。在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，还会影响用户浏览体验。 Lazyload 是一个文件大小仅4kb的图片懒加载组件（不依赖其...

UsherChen 2019-08-29 15:10 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

Vixb 2019-08-30 14:06 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

zhou_you 2019-08-22 15:13 评论0 收藏0