jQuery Mobile的：用動態加載的圖像彈出未居中首先點擊

當我點擊鏈接在第一時間，在彈出的不居中，但第二次是。我跟着answers的其他問題說，使用'positionTo': 'window'，但問題發生在我是否擁有它。還有其他解決方案表示使用超時，但我不想使用它。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

您正在打開彈出窗口的形象已被下載之前，有沒有辦法解決，因爲框架不知道該圖像的大小，因此，在彈出的應是其大小。

請注意：如果您在img.onload打開彈出，彈出窗口將與合適的尺寸在正確的位置顯示出來，即中心的窗口與圖像的大小：

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

所以，我認爲你的問題是這樣的：「如何儘可能快地打開彈出窗口 - 給用戶一個反饋 - 但具有正確的大小，而且當圖像仍在下載時？」

現在，我的建議是儘可能快地獲得圖像的大小，通過一個額外的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>

JavaScript的 - 看評論：

// 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事件，不要忘記高速緩存圖像的修復程序：'如果（img.complete）img.onload（）;'喜歡在onload功能，應在IMG之前寫的。 src assignement。 – deblocker

jQuery Mobile的：用動態加載的圖像彈出未居中首先點擊

回答

相關問題