s-comic-reader

v1.0.1

Published

2 months ago

s-comic-reader，一个漫画阅读插件

Downloads

0High
0Medium
0Low

shendi

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

漫画阅读器

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

对图片的排列加载等进行封装，不包含菜单栏、标题等定制化内容，可以自行对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 | 父级元素 | 描述 | | ------- | ------------- | -------------- | -------- | | scrDiv | scr-container | 属性el所指元素 | 根节点 | | scrCDiv | scr-center | scrDiv | 中间节点 | | imgsDiv | scr-imgs | scrCDiv | 图片列表 |

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，以及支持懒加载行为

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

漫画阅读器

引入

起步

左右切换

在元素中创建

加载模式

定位与控制

加载状态与重新加载

预加载与宽高

追加与更多操作

API

属性列表

el

els

readType

左右切换

下拉式

scrollEle

loadType

懒加载

initNum

offsetNum

imgs

IMG_STATE_SUCCESS

IMG_STATE_ERROR

imgIndex

loadImgIndex

loadNum

preWidth

preHeight

preImg

函数列表

imgSuccess(img, index, e)

imgError(img, index, e)

load(index, onload, onerror)

prev()

next()

to(index)

append(imgs)

onImgIndex()

getImgIndex()

懒加载

lazyLoad()

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

leftClick()

rightClick()

阅读类型-下拉式

getScrollTop()

getScrollMaxTop()

getOffsetTop()

onscroll()