[javascript] 디바이스별로 이미지 적용하기

예시)

PC기준

디폴트 이미지 명 : imageName.png

테블릿 이미지 명 : imageName_TA.png

모바일 이미지 명 : imageName_MO.png

랩탑 이미지는 있으면 imageName_LT.png 로 준비할 것.

 

    var BREAK_POINT_CNT = 4;
    var VIEW_TYPE;
    var PREV_VIEW_TYPE;
    var DESKTOP_START_POINT = 1440;
    var LAPTOP_START_POINT = 1024;
    var TABLET_START_POINT = 768;
    var MOBILE_START_POINT = 480;

    function setViewType() {
      //var wid = $('html').prop('scrollWidth');
      var width = window.innerWidth;
      
      if (DESKTOP_START_POINT <= width) {

        VIEW_TYPE = 'desktop';
      }
      
      if (LAPTOP_START_POINT <= width && width < DESKTOP_START_POINT) {

        VIEW_TYPE = 'laptop';
        if (BREAK_POINT_CNT == 3) VIEW_TYPE = 'desktop';
      }
      
      if (TABLET_START_POINT <= width && width <= LAPTOP_START_POINT) {
        VIEW_TYPE = 'tablet';
      }
      
      if (width < TABLET_START_POINT) {
        VIEW_TYPE = 'mobile';
      }
      
      $('html').attr('data-view-type', VIEW_TYPE);
      
      if (PREV_VIEW_TYPE != VIEW_TYPE) {
        var event = $.Event('view_type_change');
        $(window).trigger(event);//bubble true
      }
      
      PREV_VIEW_TYPE = VIEW_TYPE;
    }

    $(window).resize(function () {
      setViewType();
      updateResponsiveImage();
    })
    setViewType();
    updateResponsiveImage();
    function getFileName ( path ){
      //this gets the full url
      var url = path;
      //this removes the anchor at the end, if there is one
      url = url.substring(0, (url.indexOf("#")== -1) ? url.length : url.indexOf("#"));
      //this removes the query after the file name, if there is one
      url = url.substring(0, (url.indexOf("?")== -1) ? url.length : url.indexOf("?"));
      //this removes everything before the last slash in the path
      url = url.substring(url.lastIndexOf("/")+1, url.length);
      //return
      return url;
    }
    function getFileInfo ( path ){
      var fileStr = getFileName(path);
      
      var re = /(?:\.([^.]+))?$/;
      var ext = re.exec(fileStr)[1];
      
      var obj = {};
      obj.full_name = fileStr;
      obj.name = fileStr.split('.').slice(0, -1).join('.');
      obj.ext = ext;
      
      //return
      return obj;
    }
    /**
    * 반응형웹 자동 이미지 전환로직
    */
    function updateResponsiveImage() {
        $('.rimg').each(function (i) {
          if (typeof this.src_ori === "undefined") this.src_ori = $(this).attr('src');
          var src = this.src_ori;
          var fileInfo = getFileInfo(src);
          var name = fileInfo.name;
          
          //모바일 파일명 조합
          var new_name = name;
          //if (VIEW_TYPE == 'laptop') new_name = name + '_LT';
          if ($(this).hasClass('LT') && VIEW_TYPE == 'laptop') new_name = name + '_LT';
          if (VIEW_TYPE == 'tablet') new_name = name + '_TA';
          if (VIEW_TYPE == 'mobile') new_name = name + '_MO';
          new_name = new_name;
          
          //기존 파일명 변경
          var regExp = new RegExp(name, "gi");
          src = src.replace(regExp, new_name);
          $(this).attr('src', src);
          
        });
      }