1. 首頁
  2. 問答
  3. 有沒有更好的方法來加載圖像到img標籤以外的網站？

有沒有更好的方法來加載圖像到img標籤以外的網站？

2017-05-02 34 views
-1

我想知道是否有更好的方式將圖像加載到除<img>標籤以外的HTML文件。我問這是因爲我正在建立一個擁有照片庫的網站。這張照片庫有48張照片，似乎需要永久加載。有沒有更好的方法來加載圖像到img標籤以外的網站？

以下是此頁我的HTML代碼：

<!--IMAGES--> 
<div class="container"> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Africabound_1.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0226.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0232.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0299.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0330.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0364.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0374.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0392.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0425.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0480.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0543.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0548.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0566.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSC_0615.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0841.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0902.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0909.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0914.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0929.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0957.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN0970.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1024.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1034.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1065.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1095.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1099.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1128.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1130.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1134.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1179.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1221.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1283.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1312.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1313.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1342.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1404.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1417.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1528.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1541.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1623.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/DSCN1624.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/IMG_1836.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/IMG_1849.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Photo May 14, 01 17 06.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Photo May 14, 01 22 01.JPG"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Photo May 14, 02 05 57.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Photo May 14, 02 28 54.JPG"> 
      </div> 
     </div> 
     <div class=" col-xs-4 col-md-4 "> 
      <div class="thumbnail"> 
       <img src="AfricaPictures/Photo May 14, 03 54 52.JPG"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 
<head>

正如你可以看到，這是一個可怕的三百一十六行代碼。必須有更好的方式，我希望你會與我分享。提前致謝。

來源

2017-05-02 Aumann

+0

圖像是否有相同的大小？ – LGSon

+0

他們大多數都是相同的大小，但你可以看到我把它們全部放在引導程序的縮略圖類中。 – Aumann

+0

你可以試試這個結構，https://jsfiddle.net/LGSon/cr7vbb3b/，它會爲你節省標記，並可能加快速度。如果可以給圖像一個大小（像使用百分比的小提琴那樣），它們通常加載得更快，因爲瀏覽器不需要自己計算所有東西。給像一個固定的圖像，如'px'將加載它們甚至更快 – LGSon

回答

1

<img> -element是要去的。

請注意（如果還沒有）網絡上的照片不應超過500kb的文件大小（至少根據經驗）。這意味着您需要縮小照片尺寸並踢出像素。這裏是一個示例網站，你可以做到這一點： http://jpeg-optimizer.com/

來源

2017-05-02 19:47:30 MaxWidth

+0

這真的有幫助！萬分感謝！我的網頁現在加載非常快！ – Aumann

0

根據HTML的定義，<img>標籤是加載圖像的一種方法。您也可以使用背景圖片，數字和排序，但最終結果將是相同的，並且必須始終有一個容器來容納圖像。

有很多代碼在那裏，但可悲的是，最終的結果有點不可避免。如果你使用渲染工具，它會給你一個錯覺，即你沒有管理它，但最終，一旦代碼被渲染，打印結果可能是相同的。

您的解決方案，有一個客場節省幾行左，右：

只能包裹在一排所有自舉列，因爲他們使用的是浮動規則，你將節省高達一點點。

希望這會有所幫助！

來源

2017-05-02 16:45:33

+0

不，'img'標記不是唯一的方法，所以你需要在你的回答中更新那個部分 – LGSon

+0

好點，當我寫這個語句時可能缺乏咖啡。 –

相關問題

 相關問題