Iframe 깜빡임 방지 및 로딩창(load이벤트 이용)

 

iframe을 display: none으로 추가하고 load완료 후 show해주면서 화면이 깜빡이는 것을 방지할 수 있음.

form생성 전에 로딩창을 띄우고 load완료 후 숨겨줌.

  function functionOpen(functionName){
        var functionInfo = functionModel.getFunction(functionName);//화면 정보 가져옴
        $("#maincontents").remove();
        var iframeHtml = "<iframe id='maincontents' name='maincontents' style='display:none;'></iframe>"
        $("#frameDiv").append(iframeHtml);//ifram 추가
        commonUtil.showLoadingPage();//화면 로딩 표시 보여주는 함수

        var form = document.createElement("form"); // <form> 태그 생성
        form.setAttribute("method", "post");
        form.setAttribute("action", "preview");
        form.setAttribute("charset", "UTF-8");
        form.setAttribute("enctype", "application/x-www-form-urlencoded");
        form.setAttribute("target", "maincontents");

        addField(form, "functionName", functionName);
        addField(form, "width", functionInfo.width);
        addField(form, "height", functionInfo.height);
        document.body.appendChild(form);

        form.submit();
        form.parentNode.removeChild(form);
        $("#maincontents").on('load', function() {
          $("#maincontents").show();
          commonUtil.hideLoadingPage();
        });
      }