1.0.1 • Published 10 months ago

s-comic-reader v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

漫画阅读器

也可是图片阅读器，将图片以漫画阅读的方式进行展示。

对图片的排列加载等进行封装，不包含菜单栏、标题等定制化内容，可以自行对dom操作添加

https://gitee.com/hackshendi/s-comic-reader

引入

通过npm

npm i s-comic-reader

或直接将 scr.min.js 文件通过 script 标签引入

起步

通过 new SCR() 来创造一个默认配置的漫画阅读器，传递图片数组使其得以展示

new SCR({
    imgs : [
        { url : "图片1" },
        { url : "图片2..." }
    ]
});

执行上面的代码，不出意外的话，图片数组中的图片将在网页最下方依次上下排列，是懒加载的，初次加载 initNum 张图片，而后通过滚动触发继续加载。

功能非常简单，一个常见的使用示例如下，用以直接上手。

测试使用的demo代码

<html>
<head>
</head>
<body>
<div>
        <h1>xxx漫画</h1>
        <input id="to"/>
        <span id="page"></span>
        <button id="prev">上一页</button>
        <button id="next">下一页</button>
        <button id="append">追加</button>
        <div id="mh2" style="overflow: auto; height:500px">
            <div>123456</div>
            <div id="mh">
                <h1>xx漫画</h1>
            </div>
        </div>
        <p>xxx结尾</p>
    </div>
    <script>
        var scr = new SCR({
            el : "#mh",
            readType : "scroll",
            loadType : "lazy",
            scrollEle : document.querySelector("#mh2"),
            preImg : "https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800",
            imgs : [
                { url : "http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" },
                { url : "http://gips3.baidu.com/it/u=119870705,2790914505&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720" },
                { url : "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560" },
                { url : "ComicReader/2.jpg" },
                { url : "ComicReader/3.jpg" },
                { url : "ComicReader/4.jpg" },
                { url : "ComicReader/5.jpg" },
                { url : "ComicReader/6.jpg" },
                { url : "ComicReader/7.jpg" },
                { url : "ComicReader/8.jpg" },
                { url : "ComicReader/9.jpg" },
                { url : "ComicReader/10.jpg" },
                { url : "ComicReader/11.jpg" },
                { url : "ComicReader/12.jpg" },
                { url : "ComicReader/13.jpg" },
                { url : "ComicReader/14.jpg" },
                { url : "ComicReader/15.jpg" },
                { url : "ComicReader/16.jpg" },
                { url : "ComicReader/17.jpg" },
                { url : "ComicReader/18.jpg" },
                { url : "ComicReader/19.jpg" },
                { url : "ComicReader/20.jpg" },
                { url : "ComicReader/21.jpg" },
                { url : "ComicReader/22.jpg" }
            ],
            onImgIndex : function () {
                document.querySelector("#page").innerText = scr.imgIndex;
            },
            imgSuccess : function (img, index, e) {
                console.log("加载完成：", e);
            }
        });

        document.querySelector("#to").onchange = function () {
            scr.to(this.value);
        };
        document.querySelector("#prev").onclick = function () {
            scr.prev();
        };
        document.querySelector("#next").onclick = function () {
            scr.next();
        };
        document.querySelector("#append").onclick = function () {
            scr.append([
                { url : "http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" },
                { url : "http://gips3.baidu.com/it/u=119870705,2790914505&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720" },
                { url : "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560" },
                { url : "ComicReader/2.jpg" },
                { url : "ComicReader/3.jpg" }
            ]);
        };
    </script>
</body>
</html>

左右切换

除了下拉式阅读，还有左右切换模式，当点击图片左边上一张，右边下一张...

通过设置 readType 为 lr 将阅读器设置为左右切换模式

new SCR({
    readType : "lr",
    imgs : [
        { url : "图片1" },
        { url : "图片2..." }
    ]
});

在元素中创建

阅读器默认追加在body末尾，可以通过设置 el 属性来指定在哪个元素末尾追加

new SCR({
    el : "#main",
    imgs : [
        { url : "图片1" },
        { url : "图片2..." }
    ]
});

加载模式

提供了全加载(full)与懒加载(lazy)两种模式，通过 loadType

全加载将同时加载 loadNum 张图片，加载完成继续加载，直至 imgs 中所有元素加载完成。

懒加载将先加载 initNum 张图片，而后根据操作触发懒加载。

触发判定：当页面中剩余图片少于 offsetNum 张时，加载 loadNum 张图片。

定位与控制

定位当前展示图片的位置是常见的需求，阅读器的 imgIndex 属性与之一一对应，以及提供了一个 onImgIndex 事件，当 imgIndex 有更改时触发，可以轻松的实现页数展示

let scr = new SCR({
    imgs : [
        { url : "图片1" },
        { url : "图片2..." }
    ],
    onImgIndex : function () {
        // imgIndex有改变，可以在这里更新页面元素之类的
        // 当前展示页数：scr.imgIndex;
        // 总页数：scr.imgs.length;
    }
});

有的时候还有通过按钮控制上一页/下一页的需求，对此也提供了相应的函数

scr.prev(); // 上一页
scr.next(); // 下一页
scr.to(2); // 第3页

加载状态与重新加载

每一个 imgs 中的元素都会生成相对应的 img 元素，对于图片元素定义了三个状态

  • 加载失败
  • 加载完成
  • 未加载

状态保存在 imgs 中的元素中，参考 imgs 属性

有的时候可能因为网络问题导致加载失败，对此可以通过 imgError 事件来处理重新加载，例如

let scr = new SCR({
    // ...
    imgSuccess : function (img, index, e) {
        // 图片加载成功触发
    },
    imgError : function (img, index, e) {
        // 图片加载失败触发
        console.log(img, index, e);
        
        // 将图片src更换再换回来实现重新加载
        // 这种方法用于图片一定能加载的情况，否则会一直重新加载，需要增加判断加载失败次数来进行停止
        let src = img.el.src;
        img.el.src = "";
        img.el.src = src;
    }
});

预加载与宽高

有的时候图片过多导致加载缓慢，导致大片空白的情况，这时候可以使用预加载，当图片未加载完成时展示的是预加载图片。

let scr = new SCR({
    // ...
    preImg : "预加载图片url地址",
    preWidth : "宽度，同css，例如 100px、100%等",
    preHeight : "高度"
});

在阅读器中，图片默认宽度是 100%，高度 auto，有的时候需要自定义每张图片的宽高，可以如下设置

let scr = new SCR({
    // ...
    imgs : [
        {
            url : "图片1",
            width : "100px",
            height : "100px"
            // 以及可以设置当前图片预加载的宽高，优先级高于全局预加载宽高
            preWidth : "宽度，同css，例如 100px、100%等",
            preHeight : "高度
        },
        { url : "图片2..." }
    ],
});

追加与更多操作

阅读器的内容是通过创建对象时传递的，有的时候想要实现连续阅读效果（章节末尾自动追加下一章），可以使用函数 append 进行追加

// 下一章节图片列表
let imgs = [];

let scr = new SCR();
scr.append(imgs);

除了追加外，偶尔可能还有其他需求，例如删除某部分...

对于这种，可以通过操作 imgs 属性来实现，例如删除第二个图片元素

let scr = new SCR();
let img = scr.imgs[1];

// 从 imgs 中移除第二个元素
for (var i = 1; i < scr.imgs.length - 1; i++) {
    scr.imgs[i] = scr.imgs[i+1];
}

// 从图片列表中移除图片
scr.els.imgsDiv.removeChild(img);

API

属性列表

属性是 SCR 类的属性，可在 new SCR({}) 参数中传递进行初始化，斜体标识的属性除外。

el

当前漫画阅读器的父节点，值元素或字符串，如果是字符串，同 document.querySelector。

默认值：document.body

els

阅读器构建的大体元素列表

类型：JSON

名称class父级元素描述
scrDivscr-container属性el所指元素根节点
scrCDivscr-centerscrDiv中间节点
imgsDivscr-imgsscrCDiv图片列表

readType

阅读类型

默认值：scroll

名称描述
lr左右切换
scroll下拉式

左右切换

下拉式

scrollEle

滚动元素，是漫画阅读器的父级或祖级元素，用于加载交互等...

默认值：window

loadType

加载类型

默认值：lazy

名称描述
full全加载
lazy懒加载

懒加载

initNum

第一次加载的图片数量

默认值：5

offsetNum

剩余未读数多少张开始继续加载

默认值：3

imgs

图片列表

默认值：[]

JSONArray，格式如下

[
    {
        url : "图片地址,将于img标签的src对应",
        el : "当前元素",
        state : "状态，0加载失败，1加载完成，其他为未加载",
        width : "可选，图片的宽度，同css的width",
        heigth : "可选，图片的高度，同css的height",
        preWidth : "可选，当图片还未加载时的宽度，优先级高于属性的preWidth",
        preHeight : "可选，当图片还未加载时的宽度，优先级高于属性的preHeight"
    }
]

IMG_STATE_SUCCESS

图片状态，加载完成

IMG_STATE_ERROR

图片状态，加载失败

imgIndex

当前展示的图片在图片列表中的位置，0代表第一张

默认值：0

loadImgIndex

当前处理完的图片位置，在处理图片时，不管处理成功或失败，皆+1

当 imgs[loadImgIndex] == null 时，代表imgs中的所有图片处理完成

默认值：0

loadNum

同时加载的数量，如果是1，那么就会等第一张加载完加载第二张，第二张加载完加载第三张...

如果是懒加载，那么也是每次触发时加载的数量

默认值：2

preWidth

图片未加载时的宽度，值同css

默认值：无

preHeight

图片未加载时的高度，值同css

默认值：无

preImg

图片未加载时的预览图地址，将直接设置为img标签的src属性

默认值：无

函数列表

属性是 SCR 类的函数，一些函数为钩子函数，可在 new SCR({}) 参数中传递进行初始化，斜体标识的函数除外。

imgSuccess(img, index, e)

当图片加载完成时触发

  • img：等同于与属性 img 中的参数一致
  • index：所在 img 中的下标，也是当前图片位置
  • e：事件

imgError(img, index, e)

当图片加载失败时触发

  • img：等同于与属性 img 中的参数一致
  • index：所在img中的下标，也是当前图片位置
  • e：事件

load(index, onload, onerror)

加载属性 imgs 指定位置的元素并添加到页面末尾。

  • index：imgs中元素的位置
  • onload(e)：加载完成时触发，用于继续加载等操作
  • onerror(e)：加载失败时触发，用于继续加载等操作

返回值：加载的img元素

prev()

上一页

next()

下一页

to(index)

定位到指定页，0为第一页。

append(imgs)

追加图片列表，用于连续章节等。

  • imgs：格式同 imgs

onImgIndex()

当 imgIndex 有变动时触发。

getImgIndex()

获取图片在 imgs 中的位置，与 imgIndex 对应，用于下拉式位置重新获取。

返回值：imgIndex

懒加载

lazyLoad()

懒加载封装，当加载类型以及条件满足时进行加载操作

阅读类型-左右切换(lr)

leftClick()

图片左边点击时触发，函数返回值等于true时，意味着默认行为不触发

默认行为：切换到上一张图片

rightClick()

图片右边点击时触发，函数返回值等于true时，意味着默认行为不触发

默认行为：切换到下一张图片

阅读类型-下拉式

getScrollTop()

获取当前滚动元素的顶部滚动位置，用于自定义。

getScrollMaxTop()

滚动位置的最大值

getOffsetTop()

获取阅读器在滚动条的初始偏移（顶部可能有其他元素占据高度）

onscroll()

滚动事件，当 el 滚动时触发，用于自定义滚动事件，在阅读器创建的时会被执行一次，用以初始化。

默认行为：滚动时重新确定 imgIndex，以及支持懒加载行为

漫画漫画阅读comiccomic reader下拉式图片浏览image preview
1.0.1

10 months ago

1.0.0

10 months ago