本次更新主要解决了预加载图片的问题,因为在使用过程中发现虽然鼠标移动到图片上可以自动显示放大图片,但是由于要等待图片加载,所以很影响使用体验。
技术细节
为了使鼠标移动到图片上不卡顿,需要预加载所有大图。为了预加载所有大图,需要先获得所有大图的链接,然后放入一个隐藏的div元素中,这样在网页加载的同时,大图也已经下载到本地,不会出现临时下载图片影响体验的情况。
预加载大图方法
- 遍历所有小图的src
- 将转换后的大图src放入新建的img标签并设置可见属性为隐藏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//preload img $( "img.mg-b6,img.tdmm" ).each(function( index ) { console.log('preloading img start!'); var srcTemp = $(this).attr('src'); console.log(srcTemp); if(srcTemp.indexOf("ts-")!=-1) var srcBig = srcTemp.replace(/ts/, "tl"); else if(srcTemp.indexOf("ps.")!=-1) var srcBig = srcTemp.replace("ps.", "pl."); else if(srcTemp.indexOf("pt.")!=-1) var srcBig = srcTemp.replace(/pt/, "pl"); else if(srcTemp.indexOf("-")!=-1) var srcBig = srcTemp.replace(/-/, "jp-"); console.log(srcBig); $("body").append('<div id="preloading" style="display:none"><img src="'+ srcBig + '" alt="" /></div>'); console.log('preloading img done!'); }); |
https://chrome.google.com/webstore/detail/dmmr18-tuner/blnlaajndegbiolgkoplnopkleabfphn
There are no comments yet