/** * 按需加载js * @param string url 文件路径 * @param object fn 回调函数 */ base.loadJs = function(url, fn){ if(typeof Swipe != 'undefined'){ if(fn) fn(); return false; }; var js = document.createElement('script'); js.src = url; document.getElementsByTagName('head')[0].appendChild(js); js.onload = function(){ if(fn) fn(); }; };
配置swipe.js参数
/** * 幻灯片配置 * @param int i 当前页索引 */ base.swiper = function(i){ var obj = document.getElementById('swipe'); window.mySwipe = Swipe(obj, { startSlide : i, continuous : false, disableScroll : true, callback : function(index, element){ var i = index + 1; var s = $('#swipe li').length; $('#po').text(i + 'https://www.jb51.net/' + s); var url = $(element).find('img').attr('url'); base.loadImg(url, function(){ base.imager(index); }); } }); };
按需加载图片
/** * 按需加载img * @param string url 文件路径 * @param object fn 回调函数 */ base.loadImg = function(url, fn){ var img = new Image(); img.src = url; if(img.complete){ if(fn) fn(); return false; }; img.onload = function(){ if(fn) fn(); }; };
图片加载完成后展示
/** * 展示加载完图片 * @param int i 当前页索引 */ base.imager = function(i){ var obj = $('#swipe li').eq(i).find('img'); var url = obj.attr('url'); obj.replaceWith('<img src="' + url + '" />'); };
目前还只是初步完工，后面还需优化完善，主要有以下几点
图片查看器已绘制成功，关闭时不应该删除而是隐藏；重新调用查看器时，如图片列表没有变化则直接唤起而不必重新绘制；
图片不能放大收缩，宽高度过长情况下，预览效果会很差无法看清图片；
没有缩略图，开发时才发现我们存储图片时居然没有压缩处理图形，加载图片时流量太坑，当然这个问题本身首先要在后台存储时处理。