모바일 js 이미지 뷰어

이 기사의 예에서는 참고용으로 js 이미지 뷰어 플러그인을 사용하여 휴대폰용 웹 페이지 이미지 뷰어를 만드는 방법을 공유합니다.

요즘 맞춤형 이미지 뷰어를 개발하는 프로젝트를 진행하고 있는데, 초기에 요구사항이 완료되었습니다.

개발 시나리오는 다음과 같습니다. 다중 파일 다운로드 표시 목록에서 일부 파일이 이미지인 것으로 감지된 후 파일을 클릭하면 이미지 뷰어가 열려 이미지가 표시되고, 목록의 이미지는 동시에 표시되며 브라우저 대기열에서 앞뒤로 슬라이드하여 기타 부수적인 기능을 볼 수 있습니다.

얼핏 보면 기능 포인트가 너무 많고 복잡해 보이지만, 사진 파일 객체 세트를 정리해야 합니다.

둘째, 사진 뷰어와 사진 대기열 제작입니다. 디스플레이

그럼 그림 친화적인 로딩 방법

마지막으로 그림 뷰어는 터치 슬라이딩과 슬라이딩에 관련된 기능 구현

을 간단하게 정리했는데, 거기에 많지 않은 것 같습니다

모바일 웹페이지 이미지 뷰어 만들기

기능점수 기반의 정식 개발 준비

첫째, 이미지 파일에 통일식별자를 추가합니다. 알려진 목록 컨테이너. 파일이 이미지인지, 저장할 때 이미지 경로를 알고,

a5228c3baed46828ef677d4777b6f13845ecce18273d0aefb42c08a28d90a87e

두 번째: 이미지 대기열을 표시하기 위해 전체 화면 회색 배경을 만들고 NO./n 형식으로 현재 표시된 이미지 위치를 표시하면 모든 스타일이 제공됩니다. 세부 사항을 하나씩 설명하지 마세요(그림 스타일의 일부 속성은 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;}

그런 다음 이미지를 다음으로 직접 변경합니다. 초기화 중에 gif 이미지를 로드한 다음

a88c211a817030c162e5becf4c2842fa

동적으로 로드합니다. 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 = &#39;<section class="dialog"><section></section><figure id="swipe"><ul>&#39;; //开始绘制图片查看器
 set.each(function(){
  var url = $(this).attr(&#39;url&#39;); //图片路径
  html += &#39;<li><img src="loading.gif" width="40" height="40" url="&#39; + url + &#39;" /></li>&#39;; //循环绘制图片列表
 });
 html += &#39;</ul></figure><footer><span id="po">&#39; + (i + 1) + &#39;/&#39; + rel + &#39;</span></footer></section>&#39;; //绘制结束
 
 $(&#39;body&#39;).append(html); //渲染图片查看器
 //js文件加载状态
 base.loadJs(&#39;swipe.min.js&#39;, function(){
  base.swiper(i); //回调函数, swipe参数配置
 });
 
 var url = obj.attr(&#39;url&#39;);
 //图片加载状态
 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(&#39;<img src="&#39; + url + &#39;" />&#39;);
};

아직 초기에 완료되었으며 나중에 최적화하고 개선해야 합니다. 주로 다음 사항을 개선해야 합니다.

사진 뷰어가 성공적으로 그려졌으므로 삭제되지만 닫으면 숨겨집니다. 뷰어를 다시 불러올 때 사진 목록이 변경되지 않은 경우 다시 그릴 필요 없이 바로 불러옵니다.

사진을 확대하거나 축소할 수 없습니다. 너비와 높이가 너무 길면 미리보기 효과가 매우 낮고 사진을 선명하게 볼 수 없습니다. 그래픽 처리를 위한 압축이 없으며 이미지를 로드할 때 트래픽이 너무 높습니다. 물론 이 문제 자체를 먼저 처리해야 합니다. 백그라운드 저장 중에.