移動端js圖片查看器

來源：懂視網責編：小OO 時間：2020-11-27 20:28:58

移動端js圖片查看器

這幾天抽空在為項目開發一個量身的圖片查看器，目前已初步完成需求。開發場景是：在一個多文件下載展示列表中，如檢測某些文件為圖片時，則點擊該文件時打開圖片查看器展示該圖片，并將列表內其它圖片同時展示查看器隊列內，可供前后滑動查看及其它附帶功能。乍一聽功能點似乎有點多而且有些復雜，需要梳理一下。功能點整理；首先，我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集。其次，圖片查看器的制作及圖片隊列展示。然后，圖片友好加載方式。最后，圖片查看器觸摸滑動及滑動后相關功能的實現。簡單整理了一下，好像也不多。制作手機網頁圖片查看器。根據功能點為正式開發做好準備。首先：我們為已知列表容器內圖片文件添加統一標識，文件是否為圖片及圖片路徑在存儲時已知，直接為元素添加統一屬性。

推薦度：

點擊下載本文 文檔為doc格式

導讀這幾天抽空在為項目開發一個量身的圖片查看器，目前已初步完成需求。開發場景是：在一個多文件下載展示列表中，如檢測某些文件為圖片時，則點擊該文件時打開圖片查看器展示該圖片，并將列表內其它圖片同時展示查看器隊列內，可供前后滑動查看及其它附帶功能。乍一聽功能點似乎有點多而且有些復雜，需要梳理一下。功能點整理；首先，我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集。其次，圖片查看器的制作及圖片隊列展示。然后，圖片友好加載方式。最后，圖片查看器觸摸滑動及滑動后相關功能的實現。簡單整理了一下，好像也不多。制作手機網頁圖片查看器。根據功能點為正式開發做好準備。首先：我們為已知列表容器內圖片文件添加統一標識，文件是否為圖片及圖片路徑在存儲時已知，直接為元素添加統一屬性。

本文實例為大家分享了js圖片查看器插件的使用方法，制作手機使用的網頁圖片查看器，供大家參考，具體內容如下

這幾天抽空在為項目開發一個量身的圖片查看器，目前已初步完成需求。

開發場景是：在一個多文件下載展示列表中，如檢測某些文件為圖片時，則點擊該文件時打開圖片查看器展示該圖片，并將列表內其它圖片同時展示查看器隊列內，可供前后滑動查看及其它附帶功能。

乍一聽功能點似乎有點多而且有些復雜，需要梳理一下

功能點整理

首先，我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集

其次，圖片查看器的制作及圖片隊列展示

然后，圖片友好加載方式

最后，圖片查看器觸摸滑動及滑動后相關功能的實現

簡單整理了一下，好像也不多

制作手機網頁圖片查看器

根據功能點為正式開發做好準備

首先：我們為已知列表容器內圖片文件添加統一標識，文件是否為圖片及圖片路徑我們在存儲時已知，直接為元素添加統一屬性

其次：制作一個全屏灰色背景，展示圖片隊列，并以NO./n形式標注當前展示圖片位置；所有樣式全部給出，就不一一細說了（figure樣式內部分屬性為swipe.js必須）

.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}
 
.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}
.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}
 
.dialog figure{overflow:hidden;}
.dialog figure ul{height:100%;overflow:hidden;}
.dialog figure li{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;max-height:100%;margin:10px;}

然后：初始化時把圖片直接換成loading.gif圖片，然后動態加載

最后：swipe.js輕量級觸摸滑動插件學習使用，先調用

var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
 ...
});

配置參數

startSlide : 0, //起始位置
auto : 3000, //自動播放時間
continuous : true, //無限循環; 個人建議所有項個數不確定時賦值false, 不然為2的時候很2
disableScroll : false, //觸摸時禁止滾屏
callback : function(index, element){}, //滑動時回調函數, 參數為滑動元素排序與對象
transitionEnd : function(index, element){} //滑動完成后回調函數, 參數同上

API方法

prev(); //上一頁
next(); //下一頁
getPos(); //當前頁索引
getNumSlides(); //所有項個數
slide(index, duration); //滑動效果

基本html結構

<figure id="swipe">
 <ul>
 <li></li>
 </ul>
</figure>

必須的css屬性

figure{overflow:hidden;position:relative;}
figure ul{overflow:hidden;}
figure li{width:100%;float:left;position:relative;}

很無論體積還是文檔都很輕巧，十分簡單容易上手

swipe.min.js下載

完整開發正式開始

我們通過列表的統一觸發事件，獲取觸發對象的url屬性，如該屬性存在則調用圖片查看器并停止后面進入下載界面程序

$('.download a').click(function(){
 var obj = $(this);
 var url = obj.attr('url');
 if(url && url.length > 0){
 var set = $('.download a[url]');
 base_module.dialog(obj, set);
 return false;
 };
 
 ...
});

現在進入數據收集完畢后加工處理環節，首先展示一下我們的對象模型，對象模型的屬性及方法的定義規則

var base_module = (function(){
 var base = {};
 base.options = {
 LOCK : false
 };
 
 base.fn = function(){
 ...
 };
 
 return base;
})();

編寫圖片查看器主函數

/**
 * 圖片查看器
 * @param object obj 操作對象
 * @param object set 對象集
 */
base.dialog = function(obj, set){
 var i = set.index(obj); //當前頁索引
 var rel = set.length; //所有項個數
 var html = '<section class="dialog"><section></section><figure id="swipe"><ul>'; //開始繪制圖片查看器
 set.each(function(){
 var url = $(this).attr('url'); //圖片路徑
 html += '<li><img src="loading.gif" width="40" height="40" url="' + url + '" /></li>'; //循環繪制圖片列表
 });
 html += '</ul></figure><footer><span id="po">' + (i + 1) + '/' + rel + '</span></footer></section>'; //繪制結束
 
 $('body').append(html); //渲染圖片查看器
 //js文件加載狀態
 base.loadJs('swipe.min.js', function(){
 base.swiper(i); //回調函數, swipe參數配置
 });
 
 var url = obj.attr('url');
 //圖片加載狀態
 base.loadImg(url, function(){
 base.imager(i); //回調函數, 圖片展示
 });
};

按需加載swipe.js

/**
 * 按需加載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 + '/' + 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 + '" />');
};

目前還只是初步完工，后面還需優化完善，主要有以下幾點

圖片查看器已繪制成功，關閉時不應該刪除而是隱藏；重新調用查看器時，如圖片列表沒有變化則直接喚起而不必重新繪制；

圖片不能放大收縮，寬高度過長情況下，預覽效果會很差無法看清圖片；

沒有縮略圖，開發時才發現我們存儲圖片時居然沒有壓縮處理圖形，加載圖片時流量太坑，當然這個問題本身首先要在后臺存儲時處理。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com