JavaScript：單擊按鈕後在圖片中加載圖片

我有一個隱藏的div（通過使用max-height和transition），當我點擊一個按鈕時，它會顯示出來。這個div包含幾個圖片，當你第一次加載網站時會加載。我希望他們加載時，我點擊按鈕顯示div，使網站更輕。JavaScript：單擊按鈕後在圖片中加載圖片

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    .class1 { 
 
     max-height:0px; 
 
     transition:max-height 1s; 
 
     overflow:hidden; 
 
    } 
 
    </style> 
 
    <script> 
 
    function show() { 
 
     document.getElementById('id1').style.maxHeight = "200px"; 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
    <button onclick="show()">Show Images</button> 
 
    <hr> 
 
\t 
 
    <div id="id1" class="class1"> 
 
    <img src="img1.jpg" alt=""> 
 
    <img src="img2.jpg" alt=""> 
 
    <img src="img3.jpg" alt=""> 
 
    <img src="img4.jpg" alt=""> 
 
    </div> 
 
\t 
 
    <hr> 
 
</body> 
 
</html>

來源

2016-07-27 Tanasis

使用延遲加載並相應地加載它們，這將有助於即興表演。 –

我會建議使用的IMG標籤的屬性來存儲預期src屬性，那麼它適用於按鈕點擊。這將避免必須在JavaScript中保留src URL的列表。

HTML

<button onclick="show()">Show Images</button> 
<hr> 

<div id="id1" class="class1"> 
    <img data-src="http://lorempixel.com/400/200" alt=""> 
    <img data-src="http://lorempixel.com/400/200" alt=""> 
    <img data-src="http://lorempixel.com/400/200" alt=""> 
    <img data-src="http://lorempixel.com/400/200" alt=""> 
</div> 

<hr>

function show() { 
    document.getElementById('id1').style.maxHeight = "200px"; 
    var images = document.querySelectorAll("#id1 img"); 
    for(var i = 0; i < images.length; i++) 
    { 
    images[i].src = images[i].getAttribute('data-src'); 
    } 
}

典筆 - http://codepen.io/anon/pen/KrZvpJ

來源

2016-07-27 11:25:22 Joe

感謝它工作正常。 – Tanasis

試試這個代碼

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .class1 { 
     max-height:0px; 
     transition:max-height 1s; 
     overflow:hidden; 
    } 
    </style> 
    <script> 
    function show() { 
     document.getElementById('id1').innerHTML= '<img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""><img src="img4.jpg" alt="">'; 
     document.getElementById('id1').style.maxHeight = "200px"; 
    } 
    </script> 
</head> 
<body> 
    <button onclick="show()">Show Images</button> 
    <hr> 

    <div id="id1" class="class1"> 

    </div> 

    <hr> 
</body> 
</html>

來源

2016-07-27 11:15:37

這適用於該示例，但實際代碼更復雜。不管怎麼說，還是要謝謝你。 – Tanasis

你可以在iframe中調用seprate文件 –

這裏的工作小提琴https://jsfiddle.net/6ve7ub79/

你可以做到這一點很容易使用jQuery

的jQuery

$(document).ready(function(){ 
$('button').bind('click', function(){ 
$('.i1').attr('src', 'img1.jpg'); 
$('.i2').attr('src', 'img2.jpg'); 
$('.i3').attr('src', 'img3.jpg'); 
$('.i4').attr('src', 'img4.jpg'); 
}); 
});

HTML

<button onclick="show()">Show Images</button> 
<hr> 
<div id="id1" class="class1"> 
<img class="i1" src="" alt=""> 
<img class="i2" src="" alt=""> 
<img class="i3" src="" alt=""> 
<img class="i4" src="" alt=""> 
</div> 
<hr>

CSS

.class1 { 
    transition:max-height 1s; 
}

來源

2016-07-27 11:22:04

我需要更通用的東西來處理大量的圖像，但是謝謝。 – Tanasis

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    .class1 { 
 
     max-height:0px; 
 
     transition:max-height 1s; 
 
     overflow:hidden; 
 
    } 
 
    </style> 
 
    <script> 
 
    function show() { 
 
     document.getElementById('id1').style.maxHeight = "200px"; 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
    <button onclick="show()">Show Images</button> 
 
    <hr> 
 
\t 
 
    <div id="id1" class="class1"> 
 
    <img src="img1.jpg" alt=""> 
 
    <img src="img2.jpg" alt=""> 
 
    <img src="img3.jpg" alt=""> 
 
    <img src="img4.jpg" alt=""> 
 
    </div> 
 
\t 
 
    <hr> 
 
</body> 
 
</html>

來源

2016-12-02 11:51:56 sachin

請不要發佈裸露的代碼，也請提供解釋代碼正在做什麼。 –

JavaScript：單擊按鈕後在圖片中加載圖片

回答

相關問題