Question

好吧，所以我想在页面上有很多按钮，每个按钮都打开一个不同的模态，用一个带有php的gif填充。正如你可能已经猜到的那样，下载大量相当大的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>

当然，用PHP中的实际ID替换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>

Demo

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，因此我不需要很多不同的代码段。

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

1 个答案: