【网页插件】图片点击加载（测试版 r8）

@老虎会游泳，我理解错了？https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script#attr-defer

defer布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。
有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

@无名啊，既然MDN这么说，那么问题就不是执行顺序问题，而是onclick和addEventListener('click')互不影响，可以同时触发。

@无名啊，问题好像并不是同时触发，而是$(document).ready()事件在DOMContentLoaded事件之后发生。
不过现在研究这个问题无意义了，因为我的代码现在位于立即执行表达式中，总是最先执行。
我确实想到一个解决方法，就是用setTimeout推迟onclick事件的绑定。

$(document).ready(function () {
    document.querySelectorAll('.userimg, .userthumb').forEach(img => (img.onclick = function () {
        // 链接中的图片不预览
        if (0 !== $(this).parents('a').length) return;

        let elem = document.querySelector('body');
        let viewer = new Viewer(elem, {
            hidden: () => viewer.destroy(),
            filter(image) {
                return image.matches('.userimg, .userthumb');
            }
        });

        viewer.show()
    }));
});

@老虎会游泳，不是，之前你的版本，最后存活的onclick是viewer的，导致没法点击后加载

@无名啊，$(document).ready()事件在DOMContentLoaded事件之后发生。

@老虎会游泳，啊这。。那 @读书顶个鸟用 加defer的目的是啥？？

@老虎会游泳，研究这个咋会无意义呢？

现在你的代码，还是和viewer冲突

@无名啊，因为最开始网页插件在顶部，加载很卡。

https://hu60.cn/q.php/bbs.topic.103359.html?floor=3#3

@无名啊，因为我的代码不在事件监听器和defer内，我的代码是同步js文件中的立即执行表达式，总是最先执行，所以不必关心执行顺序了。唯一的解决方法是在一切尘埃落定后重新绑定事件。

@老虎会游泳，看来也用不了async属性，要保证按用户设定的脚本顺序执行

@老虎会游泳，你的插件排在viewer之后，并且也用$(document).ready()的话，是不是就能在viewer绑定onclick后执行了？

@无名啊，这就是我一直在说的方案，并且我已经做好了。

我确实想到一个解决方法，就是用setTimeout推迟onclick事件的绑定。
唯一的解决方法是在一切尘埃落定后重新绑定事件。

多个$(document).ready()的执行顺序是未知的，但是在$(document).ready()中使用setTimeout，那么就一定会晚于对方执行，即使延迟是0。

@老虎会游泳，不对噢，viewer加了defer，

那就是你先执行$(document).ready()，然后解析完DOM后，viewer再执行$(document).ready()。

触发DOMContentLoaded后，你先绑定onclick，再由viewer绑定？

所以，你的也应该加上defer？

@无名啊，我的更新已经发布了，你可以看我的代码。

@老虎会游泳，感觉可以和viewer作者协调下，去掉 $(document).ready()

你也说多个$(document).ready()执行顺序不定，不利于后面脚本按顺序执行

@无名啊，只要添加setTimeout，就可以在我的$(document).ready()先执行的情况下，让我的绑定后执行。

$(document).ready(() => {
    // 加这个延时，就可以保证晚于任何其他插件执行，以解决和viewer.js的冲突
    setTimeout(() => {
        document.querySelectorAll('.userimg').forEach(x => {
            // 替换掉虎绿林的点击查看大图事件
            x._onclick = x.onclick;
            x.onclick = function () {
                this.src = this._url;
                // 再次点击就触发虎绿林的点击查看大图事件
                x.onclick = x._onclick;
                // 恢复被抑制的图片外层链接
                if (x.parentNode._href) {
                    // 为了防止外层链接被立即触发，所以加个延时
                    setTimeout(() => x.parentNode.href = x.parentNode._href);
                }
            };
        });
    });
});

@老虎会游泳，现在你加setTimeout解决了，再后来的脚本想在你之后执行，该咋办呢

@无名啊，添加一点点延时就可以了，

setTimeout(() => {}, 1);

后续脚本继续增加延迟，就可以按顺序形成调用链。

Javascript是单线程的，所以只要延迟数值比我的数值（没给，默认为0）大，就会晚于我执行。

@老虎会游泳，开始各种卷了

不如从根头解决，只依赖用户设定的顺序？

@无名啊，这不现实，我想你也看到了，在我的代码开始执行时，图片请求实际上已经发出了。如果我的代码晚于其他代码加载，浏览器就有更多机会下完整个图片。要想实现最好的效果，我的代码应该放在加载顺序的最开头，而这与viewer.js的要求显然是矛盾的。为了方便用户导入，我的代码不可能同时在插件列表的开头和结尾。

@老虎会游泳，我看看啊，实际上，你的代码分成两个部分：

1. 替换img.src（尽量早执行，也即插件列表开头）
2. 点击显示原图，恢复onclick（尽量晚执行，也即插件列表结尾）

是吧？Emm……

@老虎会游泳，看来这应该也是最快最好的办法了

@无名啊，所以，把setTimeout做为加载顺序控制器是非常简单且有效的方法。在所有人都遵守这一规则的情况下，函数第二参数的数值就是加载顺序。

为了防止我默认的0占尽先机，我决定把自己的数值改成10，以便让出一些位置给想先加载的代码。setTimeout的单位是毫秒，50以内应该都不会引起用户察觉。

@无名啊，我和viewer.js还有另一兼容问题待解决：用户没点击过的图片无法正常预览，翻页只能看到红字svg。

@老虎会游泳，你想浏览时能点击加载？

@无名啊，嗯，我确实想，但这就要我侵入viewer.js预览控件，给它添加点击事件。

@老虎会游泳，作为“始作俑者”，我需求不大。你可以问问其他那十来个用户

@老虎会游泳，我现在更想写个在线压缩图片

现在还有没有免费php空间啥的？

它们能执行外部ffmpeg，heif-enc，avifenc，cwebp吗？

@无名啊，我需求很大