好的,所以我想在页面上有很多按钮,每个按钮都打开一个不同的模式,并用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>


Demo

最佳答案

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

10-06 04:23
查看更多