更改加載順序已經

頁

上有沒有什麼辦法沒有在頁面上改變圖像的加載順序的AJAX？甚至是完全停止或暫停加載已經存在的圖像的方法？更改加載順序已經

用例很簡單 - 我有一個長長的圖像列表，並且訪問者將使用指向實際容器的URL錨點（/ images＃middle-of-page）登錄到頁面的不同位置爲那些圖像。

我想至少可以加載圖片的請求容器內，然後再繼續加載圖像的其餘部分。

所面臨的挑戰是，有沒有辦法加載頁面的DOM前需要了解所要求的容器圖像的圖像路徑。

我試過在加載時獲取容器img內容，然後使用Javascript新的Image（）技術，但它並沒有改變頁面上的圖像仍然會等待所有以前的圖像加載的事實。

我也試着立即前面加上體內一個div背景圖片（CSS）的說IMG路徑，但是這也並不像負載優先級。

還有其他想法嗎？

來源

2011-10-26 atwixtor

都能跟得上。瀏覽器會按照它們在HTML中出現的順序來請求圖像，但是它們到達的順序不在其手中。 – Blazemonger

如何立即殺死靜止加載的圖像？或者在訂單處理之前更改訂單？ – atwixtor

@atwixor不，您需要查看AJAX解決方案。 HTML根本不支持這種事情。 – Blazemonger

您需要與空IMG佔位符DOM，即

<img src="" mysrc="[real image url here]" />

也可以使圖像默認顯示「正在加載...」的形象。例如，您甚至可以在某個自定義標記中緩存實際圖像網址，例如mysrc。然後，一旦你知道你想顯示什麼圖像（以什麼順序），你需要建立圖像加載靈

var images = [];//array of images to show from start and in proper order 
function step(i){ 
    var img = images[i++]; 
    img.onload = function(){ 
    step(i); 
    } 
    img.src = "[some url here]" 
}

序列有所幫助。

來源

2011-10-26 17:38:49

自定義屬性應該可能是'data-src' – millimoose

謝謝 - 我認爲這適合我的情況 - 今天我會測試它。 – atwixtor

爲了興趣，這是我結束了基於問題的答案在這裏實現的功能（我把它的最佳速度的按需加載功能）：

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images. 

     //var img = new Image(); // Use only if constructing new <img> element 

     var src = img.attr('alt'); // Find stored img path in 'alt' element 

     if(src != 'loaded') { 

      img 

      .load(function() { 
       $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in 
       $(this).parents('div:first').css('background','none'); // Remove background ajax spinner 
       $(this).attr('alt', 'loaded'); // Skip this function next time 
       // alert('Done loading!'); 
      }) 

      .error(function() { 
       alert("Couldn't load image! Please contact an administrator."); 
       $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>"); 
       $(this).parents('div:first').css('background','none'); 
      }) 

      .attr('src', src); 
     } 
    }

來源

2011-11-07 15:37:03 atwixtor

更改加載順序已經

回答

相關問題