如何在使用模板語言（如HAML）的JavaScript加載文件後加載圖像？

在發現後的文件的加載here加載圖像的看似優秀的解決方案：如何在使用模板語言（如HAML）的JavaScript加載文件後加載圖像？

$(function(){ 
    $.each(document.images, function(){ 
       var this_image = this; 
       var src = $(this_image).attr('src') || '' ; 
       if(!src.length > 0){ 
        //this_image.src = options.loading; // show loading 
        var lsrc = $(this_image).attr('lsrc') || '' ; 
        if(lsrc.length > 0){ 
         var img = new Image(); 
         img.src = lsrc; 
         $(img).load(function() { 
          this_image.src = this.src; 
         }); 
        } 
       } 
      }); 
    });

我馬上意識到，因爲沒有src屬性直接命名模板語言，如HAML會出現問題。我沉迷於使用js將dom最初重命名爲lsrc的可能性，因爲dom已加載，然後在文檔結束時將其重命名爲src，但我不確定最乾淨的方法可能在哪裏。

底線是，我想加載後的HTML最初加載和其他JavaScript腳本加載之前，如果可能的話。

來源

2012-01-18 ylluminate

你可以閱讀一些延遲加載技術爲圖片[這裏]（http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/）和[這裏]（http://davidwalsh.name/lazyload-插件）和[這裏]（http://www.appelsiini.net/projects/lazyload）。谷歌搜索「JavaScript懶惰加載圖像」產生大量的其他文章。 – jfriend00 2012-01-18 04:50:59

到目前爲止，多虧了以前的帖子得到我正確地尋找，這似乎真的做HAML等人的伎倆：http://www.appelsiini.net/projects/lazyload

它確實制定出精美，並有多個類啓動。能夠改變我的形象的標籤，例如：

=image_tag "/assets/spinner.gif", "data-original" => "path_to_image", :class =>"class1 lazy", :size => "100x100"

然後在最後添加了一行加載它的網頁，我想：

:javascript 
    $("img.lazy").lazyload();

來源

2012-01-18 05:24:22 ylluminate

如果你已經有src，用jQuery的document.ready或$()跳過它們是沒用的，因爲圖像已經被加載了。不加載它們的唯一方法是首先給出一個display:none css。

一般來說，最好是在'render-time'解決問題並呈現lazy-src。如果你不能這樣做，CSS選項將是一種替代方案，但它不會爲你提供良好編碼的價格。

您可以爲懶惰加載的圖像添加lazyLoad的類並使用CSS隱藏它們。
讓他們在document.ready或$()
延遲加載圖像（由src）
調用.removeClass('lazyLoad);在圖像上加載後。

來源

2012-01-18 03:45:49

你確定顯示：無導致圖像不被加載嗎？那不是我的經歷。對於Flash對象，這是真的，但我不認爲這是圖像的情況。據我所知，最初不加載圖像的唯一方法是在頁面中沒有''標籤或沒有'.src'屬性。如果'.src'屬性存在，瀏覽器會在運行任何JS之前立即分析該標記，然後開始加載它們（或排隊加載它們）以更改行爲。 – jfriend00 2012-01-18 04:48:10

我從閱讀一些關於圖片延遲加載的文章中看到，他們經常會在'.src'屬性中放置一個常見的佔位符圖像，然後將實際圖像URL放在自定義屬性上。這可以防止加載真實URL，但可以防止顯示破碎的圖像。 – jfriend00 2012-01-18 04:54:51

更進一步的東西呢？ HTTP：//www.appelsiini。net/projects/lazyload意識到我可以稱之爲延遲加載的圖像，這讓我意識到這一點，它似乎也許是一個很好的整體解決方案。 – ylluminate 2012-01-18 05:06:03

如何在使用模板語言（如HAML）的JavaScript加載文件後加載圖像？

回答

相關問題