사용자가 제출 버튼을 클릭하면 blockUI가 실행되고 브라우저가 서버에서로드 할 때까지 기다리는 동안 로더 GIF를 표시하는 양식이 있습니다. 결과 페이지 (모델이 서버에서 실행되고 결과 페이지가로드되기까지 몇 초가 걸릴 수 있으므로 blockUI는 제출 버튼이 작동 중임을 사용자에게 알리는 데 사용됩니다).Chrome 양식 제출 jQuery "클릭"기능을 중지합니다 (FF 및 IE8에서 작동)
문제 : Chrome에서 '제출'버튼을 클릭하면 blockUI가 표시되지만 loader.gif는 깨진 이미지로 표시되지만 FF와 IE8에서는 완벽하게 정상적으로 작동합니다. Chrome이 다른 HTTP 요청 (loader.gif 용) 또는 무언가를 중지하는 양식 제출을 처리하는 방법에 대한 특별한 내용이 있습니까 ??
EDIT :이 문제는 링크를 클릭하여 loader.gif와 함께 blockUI를 트리거하는 경우에도 발생합니다. IE8에서는 GIF가로드되고 FF에서는 가끔로드되며 Chrome에서는 깨진 이미지 아이콘이 표시됩니다. 나는 새로운 페이지에 대한 HTTP 요청이 GIF의 로딩을 깨뜨리고 있다고 생각한다. 어떤 제안 ???
<input class="input_button" type="button" value="Submit">
Javacsript/jQuery를은 다음과 같습니다 :
$(document).ready(function() {
$("#form1").validate({
rules: {
upfile: "required"
}
});
var browserWidth = $(window).width();
var browserHeight = $(window).height();
var winleft = (browserWidth/2) - 220 + "px";
var wintop = (browserHeight/2) - 30 + "px";
$('input[value="Submit"]').click(function() {
$("#form1").submit();
$.blockUI({
css:{ "top":""+wintop+"", "left":""+winleft+"", "padding": "30px 20px", "width": "400px", "height": "60px", "border": "0 none", "border-radius": "4px", "-webkit-border-radius": "4px", "-moz-border-radius": "4px", "box-shadow": "3px 3px 15px #333", "-webkit-box-shadow": "3px 3px 15px #333", "-moz-box-shadow": "3px 3px 15px #333" },
message: '<h2 class="popup_header">Processing Request...</h2><br><img src="/images/loader.gif" style="margin-top:-16px">'
});
});
});
</script>
.validate() 작품
양식 버튼 내가 자바 스크립트로 제출 양식을 제어 할 수 실제로 type="button"이다 "제출"간단하다, 벌금. 당신이 정말 너무 로더 GIF에 연결하지 않는 경우 내가 죽겠다 추천 할 것입니다, 그러나
var loadImg = new Image();
loadImg.src = "/images/loader.gif";
: 당신이 당신의 클릭 핸들러 전에 JS에서 이미지를 미리로드하는 경우
'로컬 파일에 액세스 할 수 없습니다'와 같은 콘솔에 오류가 있습니까? 이미지 경로 및 사용 된 프로토콜을 확인하십시오. –
콘솔 오류 또는 로그가 없습니다. 요소 (loader.gif)를 "검사"하고 이미지 경로를 클릭하면 gif가 새 탭에서 잘로드됩니다. Chrome이 HTTP 요청으로 인해 loader.gif를로드하지 못하는 것 같습니다. – Flash
이미지에 절대 경로를 사용하는 경우와 동일한 문제가 발생합니까? –