# 赵振才 英语常见问题解答大词典（图片版） 升级版 动态追加页面瀑布流技术 **URL:** \ **Category:** 英汉\ **Created:** [2023 年6 月 30 日 15:33 UTC](https://forum.freemdict.com/t/topic/21900 "2023-06-30T15:33:08Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年6 月 30 日 15:33 UTC](https://forum.freemdict.com/t/topic/21900/1 "2023-06-30T15:33:08Z")
updated by lbhl (webeyes) June 30, 2023 （1）重新处理扫描页面，去除白边，充分利用屏幕宽度 （2）增加功能：点击页面左(右)半部分，跳转到前(后)页，如果前(后)页不存在则追加前(后)页；长按页面左(右)半部分，追加首(末)页至该页之间所有页面。 图片词典相对于文字版词典最大的优势，除了不会有文字版的错漏之外可能就是可以前瞻后顾地看到所查之词前后关联的内容了。比如传统的按字母顺序排列的英汉词典就可以看到不少派生词扩大词汇量，这是文字版不可能做到的。现在流传的图片词典都是静态的，每一个词条对应的显示页面都写死在mdx中，如果还想看到前后的页面，词库作者一般都会在当前页面的上方和下方提供新页面的链接，这些链接的本质是一个词头，我称之为“页码词头”。点击页码词头后就可以跳转到新查询这个页码词头页面了。然而美中不足的就是这“跳转”惹的祸：当前显示的页面内容因为跳转新查询而全部抹去，转而显示新的页码词头对应的页面。如果当前页面内容和新页面内容有关联想让它们同时显示对照着看可以吗？回答是否定的！不可以同时看！你不得不后退前进来回切换着看才行。如果还同时打开了好多词典，则后退速度可能比较慢，因为每一个后退对词典软件来说可能都是一个新查询。不排除词典软件可能将已查询的页面Dom树缓存在内存中不销毁，然而，但实际操作经验告诉我大多数情况下后退的速度都和一个新查询没什么区别，什么原因？你可以去看看GoldenDict或者通用浏览器渲染一个大一点的HTML要多少内存就知道了，如果同时打开几十个甚至几百个词典而查的词又如make这样释义量大，那么一次查询内存消耗上GB的量级是很常见的，你还认为这些词典软件会在前进到新页码词头之后不销毁而保留之前的内存数据吗？或许，如果你在Windows下可能词典软件的Windows版允许你在新标签页打开，只要这些标签页没有被冻结，那么的确它们都是在内存中准备好给你看的，切换起来很迅速。但不管怎样，你也得在标签之间切换吧？想同时显示两个页面还是没门儿！最后，还是有办法曲线救国的，你可以另开一个词典软件不就可以了吗？词典软件不允许多开对吧？那可以开不同的词典软件查同一个词啊。或者实在不行，你还可以用VMWARE开虚拟机在虚拟机里再打开同样的词典软件。 看到这些，是不感觉太麻烦，查一个词用得着这么大费周折吗？！现在好了，我这有动态插入页面的JS程序问世了，当你想看前后页面的时候只要在页面左侧或者页面右侧点击一下就可以了，新页面会自动在当前页面的前面或后面插入，注意，这可不是点击页码词头的跳转的效果，根本就没有跳转没有新的词头查询，即使新页面出现了还是位于刚才查询的那个词头下，所有打开着的词典的内容还好好地在那儿继续显示呢！现在你也可以同时看到邻近页面对照参考了，再没有来回切换的麻烦！如果你不停点击，添加的页面会越来越多直到词典第一页或者最后一页；或者只做一次按下鼠标超过一秒再抬起的长按动作，也可以一次动态添加多个页面到第一页或者最后一页。就是说，查任何一个词，只要你愿意，都可以通过这种点击动态添加页面的方法将整部词典页面全部显示完。 其实，这并非什么新技术。三年前我就在隔壁上传过这种技术制作的词库，但是发现竟然没有人借鉴过去这种思路去做新的图片词典，静态图片词典仍旧在继续。从编程角度说，这个可比我写的那个牛津同义词学习词典的嵌套查询动态添加页面简单容易多了，有点JS基础的同学其实都可以弄出来。这里要告诉大家其中有一个坑，GoldenDict中你不可以简单地将一个图片文件名插入，因为它已经将其映射到内部一个服务器上的地址了，程序得修改文件路径才行，否则插入的页面图片会被其认为不存在而不会显示的。具体怎么做看我的程序吧。有我这个前人探路踩过坑，你就可以少花不少时间了，我当时可是搞了半天才探索出问题出在哪儿。 本词库原版当一个单词有多个页面时候竟然做出了多个相同词头的entry在MDX中，每一个entry中一个页面（如单词let）。个人是不喜欢这种处理方式的。花了点时间通过JS程序处理了这种问题，之前未处理的时候会有缺失页面无法追加出来的问题，现在已解决。 2023年7月5日更新： 图片词典一般制作成页面图片宽度等于词典软件窗口的宽度，如果调整词典软件窗口的宽度，页面图片宽度也随之更改。这种处理的问题是如果词典软件窗口宽度很大的时候页面宽度可能太大从而视野变小，同样的屏幕只能看到更少的页面内容了。因此希望页面宽度有一个封顶的最大宽度值，当词典软件宽度超过此封顶值时页面宽度不再随之增加。在CSS最后加入一句指令即可实现： div.mainbodyimg img { max-width: 600px; } 词库+电子书pdf下载链接：[百度网盘 请输入提取码](https://pan.baidu.com/s/10ZmOZPu39jRO9_MRvc0xWg) 提取码：vlh8 ---
**Author:** ![jiangws](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/jiangws/32/18560_2.png) [@jiangws](https://forum.freemdict.com/u/jiangws)\ **Post date:** [2023 年6 月 30 日 16:04 UTC](https://forum.freemdict.com/t/topic/21900/2 "2023-06-30T16:04:28Z")
楼主，你真的花费了不少时间，谢谢你的无私分享。 ---
**Author:** ![random](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/random/32/19006_2.png) [@random](https://forum.freemdict.com/u/random)\ **Post date:** [2023 年6 月 30 日 16:09 UTC](https://forum.freemdict.com/t/topic/21900/3 "2023-06-30T16:09:48Z")
> [@webeyes](#): > > 本词库原版当一个单词有多个页面时候竟然做出了多个相同词头的entry在MDX中，每一个entry中一个页面（如单词let） 其实这是没有应用动态加载的时候的最佳策略，可以最大程度的减少翻页。 但如果以这个为基础添加动态加载，会导致左右翻页时候页面重复。 ---
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年6 月 30 日 22:34 UTC](https://forum.freemdict.com/t/topic/21900/4 "2023-06-30T22:34:16Z")
动态追加页面重复的问题已经解决，请重新下载最新版的jieda.js和jieda.css两个文件！ ---
**Author:** ![haonigel](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/51bf81/32.png) [@haonigel](https://forum.freemdict.com/u/haonigel)\ **Post date:** [2023 年7 月 1 日 14:36 UTC](https://forum.freemdict.com/t/topic/21900/5 "2023-07-01T14:36:03Z")
先点赞！！！毕竟公益辛苦付出！谢谢！ ---
**Author:** ![endnote](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/9de0a6/32.png) [@endnote](https://forum.freemdict.com/u/endnote)\ **Post date:** [2023 年7 月 1 日 14:44 UTC](https://forum.freemdict.com/t/topic/21900/6 "2023-07-01T14:44:42Z")
OP 有创意有技术，谢谢分享 ---
**Author:** ![haonigel](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/51bf81/32.png) [@haonigel](https://forum.freemdict.com/u/haonigel)\ **Post date:** [2023 年7 月 1 日 15:10 UTC](https://forum.freemdict.com/t/topic/21900/7 "2023-07-01T15:10:26Z")
实验汇报：点击图片自动不跳转就翻页，高级！！谢谢 ---
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年7 月 2 日 02:38 UTC](https://forum.freemdict.com/t/topic/21900/8 "2023-07-02T02:38:22Z")
动态插入页面的基本思路： 制作的图片词典的图片文件名中已包含了页码信息，当前词条显示页面的前后相邻页面的图片文件名和当前页面的图片文件名之间存在简单的加减1的关系。例如，当前词条的页面是在词典第1234页，它的图片文件名是OALD9\_1234.jpg，则其前后相邻页面的图片文件名分别为OALD9\_1233.jpg和OALD9\_1235.jpg。那么想看前页或后页的时候只要通过程序由当前文件名获得前后文件名然后在当前页面前后插入新页面节点即可。新插入的页面会被立即在原有视图中渲染显示出来而不会先抹去当前视图中所有内容后再去跳转显示一个新的页面。这个JS程序干的活儿实际上就是在DOM树上添加DOM节点而已，这是JS最最常见的基本应用了，实在是任何一个即便JS刚入门的新手都应该掌握的技术。如果原静态词典每个页面内容除了页面图片本身还有其他信息（如当前页所有单词的列表），则稍微复杂一点，事先将这些信息数据汇总后用某个数据结构如JSON存进JS程序中，当插入页面图片的时候从JSON中查找该页面的信息数据连同图片一并插入。 动态插入技术将大大提升图片词典的体验，希望今后成为图片词典制作技术的主流。其中的JS程序一旦读懂理解之后，可以用作模板用于任何图片词典，无需每次制作都重新编程。 ---
**Author:** ![一袭青烟](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E4%B8%80/958977/32.png) [@一袭青烟](https://forum.freemdict.com/u/%E4%B8%80%E8%A2%AD%E9%9D%92%E7%83%9F)\ **Post date:** [2023 年7 月 2 日 03:04 UTC](https://forum.freemdict.com/t/topic/21900/9 "2023-07-02T03:04:53Z")
相同词条的确有不完美的地方！ 在深蓝词典和dicttango多词典查询中，查after all, 62页和64页都有after all 这个词条，我是设置了合并相同词条标签的，这时候62页和64页就会并排在一起！就会发现可以打开61，65，但是无法打开63！总的来说是很方便的，谢谢分享！ ---
**Author:** ![SilasYang](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/silasyang/32/46854_2.png) [@SilasYang](https://forum.freemdict.com/u/SilasYang)\ **Post date:** [2023 年7 月 2 日 16:15 UTC](https://forum.freemdict.com/t/topic/21900/10 "2023-07-02T16:15:04Z")
原来楼主是一直锐意创新的技术大咖啊！可否考虑将技术教学录成视频上传至哔站之类的平台呢？您一人的精力毕竟有限，如果有更多同好掌握了这些技术，相信我们的词典词库DIY领域将焕然一新，进入勃勃生机，万物竞↘发↗的境界！ ---
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年7 月 3 日 10:46 UTC](https://forum.freemdict.com/t/topic/21900/11 "2023-07-03T10:46:22Z")
[一袭青烟](https://forum.freemdict.com/u/%E4%B8%80%E8%A2%AD%E9%9D%92%E7%83%9F) 检查出来的错误现在已经更正。请下载最新版的两个文件更新：jieda.js 和 英语常见问题解答大词典（图片版 增订版 第五版）.mdx 两个文件 本词典比较另类，不仅同一个词头可能在MDX中作为entry多次出现，而且还可能出现一个词头下有多个页面但它们的页码不连续的情况，后者在一般的图片词典中是不会有的，之前编程没有考虑这点，这也是之前有BUG的原因。 最后我用简短的话精炼归纳了一下JS中使用的动态追加页面的功能： 短促点击页面左(右)半部分，跳转到页码连续的前(后)页，若没有前(后)页或虽有前(后)页但页码与当前页不连续，则向前(后)动态插入追加一页；长按页面左(右)半部分，也可跳转到页码连续的前(后)页，若没有前(后)页则追加所有前(后)页至首(末)页，若有前(后)页但页码与当前页不连续，则追加当前页和前(后)页之间所有缺失的页面。 作为例子，请查询God bless you，一试便知。 ---
**Author:** ![weshor](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/e19adc/32.png) [@weshor](https://forum.freemdict.com/u/weshor)\ **Post date:** [2023 年7 月 4 日 01:16 UTC](https://forum.freemdict.com/t/topic/21900/12 "2023-07-04T01:16:06Z")
您好，多谢分享。提个小bug，还是相同词条的问题，在goldendict中，查after all, 62页和64页都有after all 这个词条，但是63页实际上是62页after all这个词条的后半部分内容，希望能够在查after all这个词条时，能够一次性把所有相关内容展现出来，无须再次点击翻页。可能其他类似的词条也存在这样的问题。 ---
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年7 月 5 日 01:02 UTC](https://forum.freemdict.com/t/topic/21900/13 "2023-07-05T01:02:34Z")
谢谢提醒。这种BUG只改一个您发现的没有意义，要改就一个不拉全面地改，这需要全面校对MDX，现在没有精力去做这个了，你找找原作者看看他是否有时间？其实只要您鼠标点击一下就可以方便地将缺失的页面补全了，我也是和您一样的完美主义者，但感觉实在太累现在有点想退出了… ---
**Author:** ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\ **Post date:** [2023 年7 月 5 日 01:17 UTC](https://forum.freemdict.com/t/topic/21900/14 "2023-07-05T01:17:25Z")
看看我的JS源码吧。我认为源码不难看懂的，我这里已经写了原理了更好看懂。 ---
**Author:** ![SilasYang](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/silasyang/32/46854_2.png) [@SilasYang](https://forum.freemdict.com/u/SilasYang)\ **Post date:** [2023 年7 月 5 日 02:45 UTC](https://forum.freemdict.com/t/topic/21900/15 "2023-07-05T02:45:34Z")
收到收到，主要困难是没有注释，不过我会尽力的。 ---
**Author:** ![SilasYang](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/silasyang/32/46854_2.png) [@SilasYang](https://forum.freemdict.com/u/SilasYang)\ **Post date:** [2023 年7 月 5 日 02:56 UTC](https://forum.freemdict.com/t/topic/21900/16 "2023-07-05T02:56:19Z")
非常感谢和理解您！如果目前因为身心疲惫而萌生退意，可以先降低更新频率休息休息，和坛友闲聊吹水，指点迷津，共同进步，待养精蓄锐之后再重新出山~一句话，freemdict无法失去您 🤣 ---
**Author:** ![nihaocool](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/n/59ef9b/32.png) [@nihaocool](https://forum.freemdict.com/u/nihaocool)\ **Post date:** [2023 年7 月 11 日 15:06 UTC](https://forum.freemdict.com/t/topic/21900/17 "2023-07-11T15:06:01Z")
大神之作，值得拥有❗ ---
**Author:** ![brightd](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/b/90db22/32.png) [@brightd](https://forum.freemdict.com/u/brightd)\ **Post date:** [2023 年7 月 12 日 00:43 UTC](https://forum.freemdict.com/t/topic/21900/18 "2023-07-12T00:43:35Z")
> [@webeyes](#): > > 但感觉实在太累现在有点想退出了… Terribly sorry to learn that. 请不要离开论坛，非常喜欢您的作品！ ---
**Author:** ![RANP0](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/848f3c/32.png) [@RANP0](https://forum.freemdict.com/u/RANP0)\ **Post date:** [2023 年8 月 30 日 14:38 UTC](https://forum.freemdict.com/t/topic/21900/19 "2023-08-30T14:38:28Z")
大大能否将 [《英语常用疑难词用法手册》 陈用仪 第二版 MDX](https://forum.freemdict.com/t/topic/21168) 也加上动态追加技术呢？ ---
**Author:** ![huamaofan](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/b9e5f3/32.png) [@huamaofan](https://forum.freemdict.com/u/huamaofan)\ **Post date:** [2023 年8 月 31 日 01:33 UTC](https://forum.freemdict.com/t/topic/21900/20 "2023-08-31T01:33:19Z")
![Screenshot_2023-08-31-09-31-11-306_com.baidu.netdisk](https://forumcdn.freemdict.com/uploads/default/original/3X/b/b/bb3c6bc4f1bc9d5aaee59716726f95a05036cf0e.jpeg) 可以麻烦大神们传一个到主站吗？百度云的这个图片mdd一直无法下载，不知道是什么缘故！ 感谢大神们！ [下一页](https://forum.freemdict.com/t/topic/21900.md?page=2)