圖片庫加載幫助/如何在觸發後即時加載圖像？

我有一個類似於這個畫廊JulienPons。一切工作正常，但當我加載頁面，它會得到巨大的加載時間。全屏圖像在縮略圖和div元素之前加載。如何才能使圖像和視頻僅在縮略圖被點擊後加載？圖片庫加載幫助/如何在觸發後即時加載圖像？

ps。我使用href值來分配圖像滑塊div，然後使用.toggle（）更改每個縮略圖的滑塊＃。

更新

<div id="featured"> 

      <!-- PROJECT START --><div id="dubstep" class="project"> 
      <ul>     
<li class="img1"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li> 
<li class="img2"><img src="gallery/dubstep-2.jpg" alt="Css Template Preview" width="940" height="529"/></li>   
<li class="img3"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li> 
<li class="iframe"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li> 
      </ul> 
      </div><!-- PROJECT END --> 
    </div>

我想這些圖像加載我點擊DIV與類拇指之後。他們現在的方式，他們加載文件，使加載時間真的很大。

<div id="portfolio"> 
    <div id="thumbnails"> 

     <!--THUMBNAIL START --><div class="thumb" id="dubstep-thumb"><a href="#dubstep"> 
     <img src="thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/> 
     </div><!--THUMBNAIL END --> 

    </div> 
    </div>

來源

2011-07-31 Grozav Alex Ioan

如果您可以發佈您的代碼和HTML，那麼迴應起來會更容易。 –

完成:)你能幫助我嗎？ –

給一個ID，每個圖像和他們的SRC設置爲一個小的1x1 dummy.gif：

<img id="image1" src="dummy.gif" alt="Css Template Preview" width="940" height="529"/>

加onclick屬性，以拇指DIV：

<div class="thumb" id="dubstep-thumb" onclick="loadImage(1)">

定義loadImage（）在你的<head>是這樣的：

function loadImage(id) { 
    var image = document.getElementById('image'+id); 
    image.setAttribute('src', 'gallery/dubstep-'+id+'.jpg'); 
}

來源

2011-07-31 09:54:34 nobody

修改你的代碼，使它符合我的需求:)謝謝你的幫助！ –

圖片庫加載幫助/如何在觸發後即時加載圖像？

回答

相關問題