Загруженные изображения в модальном ТОЛЬКО, когда модальный отображается

Хорошо, поэтому я хочу, чтобы на странице было много кнопок, каждая из которых открывала другой модальный, заполненный gif с php. Как вы можете догадаться, загрузка большого количества больших gifs занимает много времени. Решение: загрузите 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 конечно.

Теперь этот фрагмент фактически не PULL МФП с сервера, так что в конце концов, ничто не отображается на всех ...

редактировать: больше кода

<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

источник

2017-02-04 traxx2012

Я бы предложил использовать один модальный, а затем изменить src gif в том, что один модальный - создание модального для каждого gif было бы плохо. Намного лучше иметь общий модальный, который вмещает каждый другой gif. – gavgrif

@gavgrif Вы правы, но это не решает проблему, что браузер, похоже, не тянет изображения. – traxx2012

Если изображение не отображается, то путь, вероятно, неверен – charlietfl

$(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(); 
     }); 
    }); 
});

Сценарий получает идентификатор вызывающего элемента, поэтому мне не нужно много разных фрагментов.

источник

2017-02-08 21:06:51 traxx2012

Загруженные изображения в модальном ТОЛЬКО, когда модальный отображается

ответ

Смежные вопросы