當啓動模式加載內容時顯示加載動畫

我想使用Bootstrap模式在我的網站上顯示較大版本的圖像。當有人點擊圖像時，我打開模式並使用jQuery的html()函數加載圖像。當啓動模式加載內容時顯示加載動畫

jQuery('.myimage').click (function() { 

      // determine the URL of the image to show 
      var imageURLLarge = "some/cdn/location"; 

      // load the image in a DIV element inside modal 
      jQuery('#imgContent').html ('<img src="' + imageURLLarge + '"'); 

      // show the modal 
      $('#myModal').modal('toggle'); 
});

該代碼工作正常，並顯示圖像。但是，如果圖像很大，儘管模式顯示，圖像顯示需要一些時間。我想在等待時間內顯示進度條或加載動畫。我怎麼做？

我查了幾個地方，他們大多建議使用JQuery的AJAX方法，如load()。但是我無法使用AJAX，因爲我的圖像來自不同的URL（CDN），並且AJAX的相同URL安全策略阻止了我。

任何幫助/方向將非常感激。

來源

2014-09-25 hashbrown

爲什麼不使用doc's中顯示的模式，只需將數據屬性設置爲圖像包裝。這樣，你得到所有的內置的IT功能預加載等

<a class="myimg" 
    href="yourlargeimage.jpg" 
    data-toggle="modal" 
    data-target="#myModal" 
><img src="yoursmallimage.jpg" /></a>

如果提供了一個remote網址（大圖），內容將通過jQuery的load方法加載一次並注入進入.modal-content股利。如果您使用的是data-api，則可以使用href屬性指定遠程源。

來源

2014-09-25 06:34:36

這是因爲我不想在一開始就加載大圖像。我通常在網頁上顯示較小尺寸的圖像，以便頁面加載速度更快。只有當有人點擊圖片時，我纔想展示更大的版本...... – hashbrown 2014-09-25 06:39:15

「href」屬性中的圖片或網址只在模型中加載，而不是從*開頭*中加載。因此，如果您從一開始就在「」標籤內放置較小的圖像，那麼這應該都很好。 – 2014-09-25 06:40:02

是嗎？我不知道..讓我試試.. – hashbrown 2014-09-25 06:41:12

當啓動模式加載內容時顯示加載動畫

回答

相關問題