изображение не обновляется после изменения «SRC» атрибут

Я хотел бы, чтобы обновить изображение после выбора другого пункта из меню:изображение не обновляется после изменения «SRC» атрибут

<html> 
    <head> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 

    $(function() { 
     $("#selectable").selectable({ 
     stop: function() { 
      $(".ui-selected", this).each(function() { 
      // Works on FF; doesn't work on Chrome and IE 
      d = new Date(); 
      $("#chart_image").prop("src", this.id + "?" + d.getTime()); 
      }); 
     } 
     }); 
    }); 

    $(function() { 
     // Selects the first <li> element 
     $("#selectable").selectable().children().first().addClass('ui-selected'); 
    }); 

    </script> 

    </head> 
    <body> 
    <?php 

     header('Cache-Control: no-cache, no-store, must-revalidate'); 
     header('Pragma: no-cache'); 
     header('Expires: 0'); 

     $dirname = "charts/"; 
     $images = glob($dirname."*.svg"); 

     echo '<ol id="selectable">'; 
     foreach($images as $image) { 
     echo '<li class="ui-widget-content" id="'.$image.'">'.basename($image, ".svg").'</li>'; 
     } 
     echo '</ol>'; 

     echo '<figure><embed id="chart_image" type="image/svg+xml" src="'.$images[0].'"></embed></figure>'; 
    ?> 
    </body> 
</html>

Приведенный выше код хорошо работает на FF. Однако в Chrome и IE ничего не происходит после выбора разных пунктов меню. Я пробовал трюк с добавлением текущей метки времени в конец файла. Я также пробовал с заголовками кеша - никаких результатов.

Спасибо!

источник

2015-07-10 mateusz.b

ли вы предоставить jsfiddle для этого? –

Пробовал переходить на '$ (" # chart_image "). Attr (" src ", this.id +"? "+ D.getTime());'? – Justinas

Насколько я понимаю, кэширование здесь не является проблемой, потому что кеширование выполняется для одного и того же URL-адреса, здесь меняется URL-адрес, поэтому кэширование не будет отображаться на картинке –

Таким образом, проблема, кажется, к embed типу type="image/svg+xml" Firefox, кажется, поддерживает его для svg s и нормальных изображений, таких как jpg, gi f и т. д., тогда как другие браузеры этого не делают. Таким образом, один из способов заставить его работать во всех браузерах - это изменить тип на type="image/jpeg", пока изображение не является svg. Если все ваши изображения имеют тип svg, используйте type="image/svg+xml". Другой способ справиться с этим - просто пропустить атрибут типа или использовать тег img.

Я также:

Удален двойной инициализации selectable
Удалены .each(), как это ненужно, как вы бы установить последний выбранный идентификатор в качестве источника вставлять

Взгляните below code, где я использовал type="image/jpeg, и он работает на Chrome/FF/Safri и т. д.

$(function() { 
 
    $("#selectable").selectable({ 
 
     stop: function() { 
 
      $("#chart_image").attr({ 
 
       "src": $(".ui-selected", this)[0].id 
 
      }); 
 
     } 
 
    }) 
 
    .children().first().addClass('ui-selected'); 
 
});

#feedback { font-size: 1.4em; } 
 
    #selectable .ui-selecting { background: #FECA40; } 
 
    #selectable .ui-selected { background: #F39814; color: white; } 
 
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<ol id="selectable"> 
 
    <li class="ui-widget-content" id="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Blue_morpho_butterfly.jpg/531px-Blue_morpho_butterfly.jpg">Item 1</li> 
 
    <li class="ui-widget-content" id="http://www.potentash.com/wp-content/uploads/2013/03/butterfly.jpg">Item 2</li> 
 
    <li class="ui-widget-content" id="http://smwv.org/wp-content/uploads/2013/11/blue-butterfly2.png">Item 3</li> 
 
</ol> 
 
    
 
<figure><embed id="chart_image" type="image/jpeg" src="http://smwv.org/wp-content/uploads/2013/11/blue-butterfly2.png" /></figure>

источник

2015-07-10 12:47:45 lshettyl

Большое спасибо - это была проблема с графикой svg. Переключение на решило проблему! –

Вы можете использовать selecting опции

selecting: function(event, ui) { 

    last_selected_value = ui.selecting.value; 
    last_selected_id = ui.selecting.id; 
      $("#chart_image").attr({ 
      "src": last_selected_value 
     }); 

    }

Отъезд JS Fiddle

Надеется, что это помогает

источник

2015-07-10 12:41:17 Abhinav

Вы должны изменить атрибут src, а не свойство. Согласно jQuery documentation для метода prop(), он должен быть использован, чтобы установить следующее: selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked или defaultSelected.

Так решение:

$("#chart_image").attr('src', this.id + "?" + d.getTime());

источник

2015-07-10 12:49:57 Brian

В документе jQuery говорится: «* он должен использоваться *« не »* он должен ** использовать ** ** *. Вы также не смогли прочитать дальше: «* До jQuery 1.6 эти свойства были восстановлены с помощью метода .attr(), но это не было в пределах attr. Они не имеют соответствующих атрибутов и являются только свойствами. *" – Abhitalks

@Abhitalks Так что вы предлагаете? Использовать метод 'prop()', который явно не повторяет изображение снова и снова, пока не произойдет волшебство? Изменение атрибутов изображения в буквальном смысле используется в [документации для attr()] (http://api.jquery.com/attr/) – Brian

изображение не обновляется после изменения «SRC» атрибут

ответ

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