Jquery Mobile : 처음 클릭 할 때 동적으로로드 된 이미지가있는 팝업

링크를 처음 클릭하면 팝업이 중앙에 배치되지 않지만 두 번째로 클릭하면됩니다. 나는 'positionTo': 'window'을 사용하는 다른 질문 중 answers을 따라 갔지만 문제는 내가 가지고 있든 없든간에 발생합니다. 시간 제한을 사용한다고 말하는 다른 솔루션이 있지만이를 사용하고 싶지는 않습니다. 당신이 여러 번 실행하면 캐시와 하드 새로 고침을 비우해야합니다Jquery Mobile : 처음 클릭 할 때 동적으로로드 된 이미지가있는 팝업

function setImage() 
 
{ 
 
    $('#image-popup img').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/7/7b/Orange-Whole-%26-Split.jpg'); 
 

 
    $('#image-popup img').on('load', function() { 
 
    console.log('loaded image from click'); 
 
    $('#image-popup').popup('reposition', {'positionTo': 'window'}); 
 
    }); 
 
}

<html> 
 
<head> 
 

 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
</head> 
 
    
 
<body> 
 

 
    <a href='#image-popup' data-rel="popup" data-position-to="window" onclick='setImage()'>Open image</a> 
 

 
    <div id='image-popup' data-role='popup'> 
 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
 
    <img class="popphoto" src="" alt="orange"> 
 
    </div> 
 

 
</body> 
 
    
 
</html>

참고.

출처

2017-03-17 user2233706

http://stackoverflow.com/a/26587363/1771795 – Omar

이미지를 다운로드하기 전에 팝업을 열면 프레임 워크가 이미지의 크기를 알 수 없으므로 해결 방법이 없으므로 팝업이 표시됩니다.

하십시오, 참고 :

$('#image-popup img').on('load', function() { 
    $('#image-popup').popup('open', {'positionTo': 'window'}); 
    });

: 당신이 img.onload에서 팝업을 열 경우, 팝업은 즉, 이미지의 크기로 창을 중심으로 오른쪽 위치에 적당한 크기로 표시됩니다

그래서, 여기에 귀하의 질문이 같을 것 같아요 : "가능한 빨리 팝업을 열어서 사용자에게 의견을 제시하는 방법 - 올바른 크기로 그리고 이미지가 아직 다운로드 중입니까?"

지금, 제 제안은 추가 XHR 요청을 통해 최대한 빨리 이미지 크기를 얻는 것입니다. 분명히 이것은 네트워크 상태에 의해 허용되는 것처럼 빠르지 만, 우리는 항상 로더를 간략히 보여줄 가능성이 있으며, XHR은 전체 이미지 데이터가 아닌 처음 몇 바이트 만 가져올 것입니다.

HTML :

는이를 위해, 우리는 팝업이 오픈되는 방식 변경해야

<a href='#' onclick='openPopupWithSize("https://upload.wikimedia.org/wikipedia/commons/7/7b/Orange-Whole-%26-Split.jpg"); return false;'>Open image</a>

자바 스크립트 - 참조 의견 :

// helper function to get byte value 
function readByte(data, offset) { 
    return data.charCodeAt(offset) & 0xff; 
} 
// request size, assign src, open popup & look how the image is downloading 
function openPopupWithSize(pngUrl){ 
    // clean-up before, if we have to deal with some more images 
    $('#image-popup img').attr('src', ""); 
    // set various parameters 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", pngUrl, true); 
    // just get only what is strictly necessary 
    xhr.setRequestHeader("range', 'bytes=0-23"); 
    xhr.overrideMimeType("text\/plain; charset=x-user-defined"); 
    xhr.onprogress = function(e){ 
     // read the few bytes needed to get width & height of the png 
     var data = e.currentTarget.response; 
     // offset are: 16 & 20 - see PNG specifications 
     var w = readByte(data, 19) | (readByte(data, 18) << 8) | (readByte(data, 17) << 16) | (readByte(data, 16) << 24); 
     var h = readByte(data, 23) | (readByte(data, 22) << 8) | (readByte(data, 21) << 16) | (readByte(data, 20) << 24); 
     // set size of the container, will be reset by the framework as needed 
     $('#image-popup-popup').css("width", w+"px"); 
     $('#image-popup-popup').css("height", h+"px"); 
     // assign image src like you did it in your example 
     $('#image-popup img').attr('src', pngUrl); 
     // finally, open the popup - JQM is allowed now to reposition correctly 
     $('#image-popup').popup("open", {"positionTo": "window"}); 
    }; 
    xhr.send(null); 
}

, 공유 주시기 바랍니다 당신이 필요로하는 것이면 의견에있는 당신의 생각.

출처

2017-03-18 18:09:17 deblocker

첫 번째 코드 스 니펫이 내가 한 일입니다. JS 코드를 추가하지 않고이 작업을 수행 할 수 있는지 확인하고 싶습니다. 사용자 피드백을주기 위해 JQM 로더를로드 이벤트 전에 표시하고 이벤트 핸들러에서 숨 깁니다. – user2233706

@ user2233706 : 좋아, onload 이벤트를 고수하면 캐시 된 이미지에 대한 핫픽스를 잊지 마라 : if (img.complete) img.onload(); onload 함수와 마찬가지로 img 앞에 씁니다. src 할당. – deblocker

Jquery Mobile : 처음 클릭 할 때 동적으로로드 된 이미지가있는 팝업

답변

관련 문제