最近在幫同事在舊系統增加功能時又接觸到viewer.js，其中踩了些坑，直到跟蹤到源碼才找到解決方法。
舊系統是N年前的系統，采用jquery+自研發的UI進行的開發，其中引入了一些插件，其中圖片預覽就是采用的viewer.js。之前上傳的文件只有圖片，所以預覽並沒什么問題，新需求中要求可以上傳PDF文件，上傳后點擊pdf圖片在新頁面打開pdf文件。
思路
上傳文件成功胡判斷文件后綴，普通圖片就在dom中添加一個img標簽並設置src和data-org屬性為圖片地址，pdf文件添加個img標簽設置data-org屬性為圖片地址src為一張pdf圖片。通過事件委托實現點擊pdf圖片時獲取data-org屬性並進行跳轉。
問題
按思路開發完成后發現pdf圖片還可以預覽，這個並不是想要的效果。那就需要想辦法預覽時去除部分圖片。
解決思路
系統中使用的viewer是jquery的插件，但是當前已經停止維護了，地址是https://github.com/fengyuanchen/viewer 版本是0.5.1
方案1. 首先要去官網查看有沒有想過API，於是在找到github找到了filter方法，看這描述妥妥得能解決了：
這樣只要給pdf圖片添加個特定的class，判斷只要有此class就返回false。一番操作后發現沒有生效，排查發現是系統中引用的viewer.js版本較低並沒有filter方法。貿然升級風險較高，只能再看看當前使用的版本是否有其他API。
方案2. 百度搜索相關方案（大部分都是復制粘貼的），沒啥借鑒意義，倒是根據名猜到可能有用的屬性：show
show是預覽前的鈎子函數，返回true能進行預覽，返回false是不能進行預覽。這樣只要參數中能區分就能實現，遺憾的是並不能區分。
方案3. 既然show鈎子函數中不能區分那只能自己設置個flag了。全局設置flag為true，在pdf圖片上綁定click事件，除了在新頁面打開pdf外還要設置flag為false。這樣在show函數里根據flag的true/false判斷要不要顯示。但是雖然點擊pdf圖片不會彈出預覽但是在底部縮略圖還是有pdf圖片的，又放棄了這種方案。
方案4. 只有在底部縮略圖中看不到圖片才是真理，不能把視線放在圖片的點擊事件上。既然這樣，為何不看下底部縮略圖的dom，只要在底部dom中圖片未出現也肯定不會加上圖片預覽效果。
查看官方demo中所有縮略圖都放在.viewer-list元素了，那不妨先看下哪些圖片才會放到這個元素中。
從這里可以看得出$list正是縮略圖的容器，在初始化的時候通過遍歷this.$images把縮略圖插入到容器中。所以只要找到this.$images的規則就能設置部分圖片不預覽。
這里能看出當前元素如果是img就取當前元素，否則取當前元素下所有img元素。所以，但凡是img標簽的都會添加預覽效果，那有沒有不用img標簽而顯示圖片呢，沒錯，就是背景圖片。
解決方案：把不想進行預覽的圖片通過背景圖片的方式展示出來。
以上只針對https://github.com/fengyuanchen/viewer/releases/tag/v0.5.1
viewer.js 1.7.2實現方式如下
可以看到如果設置了filter方法就會篩選出filter返回true的圖片進行預覽。當然也是篩選的img標簽。所以通過設置背景圖片的方法還是適用的。