仅在显示模态时下载模态图片

Question

好的，所以我想在页面上有很多按钮，每个按钮都打开一个不同的模式，并用php填充gif。 您可能已经猜到了，下载许多很大的gif文件需要花费大量时间。 解决方案：仅在实际显示包含它们的模态时才加载它们。 建议我使用以下jQuery代码段：

echo '<script>' . "\r\n";
echo '$("#btn_'.$id.'").click(function(){' . "\r\n";
echo '$("#img_'.$id.'").attr("src", "'.$id.".gif" . '"); });';
echo '</script>' . "\r\n" . "\r\n";

更具可读性的简洁，无PHP版本：

<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });
</script>

该ID被php中的实际ID取代。

现在，此代码段实际上并没有从服务器中提取gif，因此最终什么也没显示。

编辑：更多代码

<button id="img_id" class="modalbutton" style="background-image: url(thumbs/id.gif); cursor:pointer;" onclick="document.getElementById('modal_id').style.display='block'"></button>
<div id="modal_id" class="w3-modal w3-animate-zoom" onclick="this.style.display = 'none'">
<span id="span_id" class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">&times;</span>
<div class="modal-content" onclick="this.style.display='none'"><img id="img_id" src=""></div>
</div>
<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });</script>

演示版

Answer 1

$(document).ready(function() {
    $("button").click(function(event){
        var $id = event.target.id;
        document.getElementById('modal_'+$id).style.display='block';
        var $image = $('#img_'+$id);
        var $downloadingImage = $('#imagehelper_'+$id);
        $downloadingImage.attr('src', $id+'.gif');
        $downloadingImage.on('load', function() {
            $image.attr('src', $id+'.gif');
        }).each(function() {
            if(this.complete) $(this).load();
        });
    });
});

该脚本获取调用元素的ID，因此我不需要很多不同的代码段。