2012-06-27 2 views
4

по какой-либо причине jQuery .load не запускается, если изображение сохраняется в кеше (только для Chrome).jQuery .load не запускается, если изображение сохраняется в кеше (только для Chrome)

вот jsfiddle

, как я могу это исправить?

+2

Данг - его любопытное странно видеть вопрос о выпуске браузера, который Безразлично 't end in "IE only" –

+0

Последнее, что я знал '.load()' не работал в Chrome, если вы работаете как раз с вашего файла sys ПЭМ. – Jack

+0

2017 и все еще проблема для Chrome (но не IE11, Edge или Firefox). Google отстает? – Zeek

ответ

6

Это происходит потому, что, если ток ЦСИ и нового ЦСИ таких же он не загружает новое изображение, как и такое же. Взлом для этого делает текущий src значение пустое.

$("#btn").click(function(){ 
    $("#tst").attr('src',''); 
    $("#tst").attr('src','https://www.google.co.il/images/srpr/logo3w.png'); 
}); 

jsFiddle demo link

+0

Я знал, что есть лучший способ, чем Ohgodway's. Большое спасибо! – Ron

+1

Там, где можно обойтись без взлома. '.each (function() {if (this.complete) $ (this) .trigger ('load');});' –

+0

@NigelAngel, не могли бы вы предоставить демонстрационную ссылку jsFiddle? – Vaishak

0

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

+0

добавление timestamp нецелесообразно ... это означает, что мне нужно каждый раз менять имя img, или есть другой способ загрузить реальный img с его обычным именем, но добавить временную метку без необходимости менять свое имя? – Ron

+1

$ ('img'). Attr ('src', $ (this) .attr ('src') + '?' + Math.random()); – Ohgodwhy

+0

это действительно загрузит img каждый раз. Я хочу исправить это, чтобы он работал как firefox, а не обходил его. если я не найду лучшего решения, мне придется использовать jquery.browser, чтобы применить это решение только для chrome. – Ron

1

Например, вы могли бы использовать метку времени:

var timestamp = new Date().getTime(); 
 
    $("#image_test") 
 
     .attr("src", "http://www.sandiegovips.com/wp-content/uploads/2014/05/test-image.jpeg?timestamp="+timestamp) 
 
     .load(function() { 
 
      alert("image loaded!"); 
 
     });
<img id='image_test' src=""/>

+1

Да, этот подход работал для меня, спасибо :). e.g..if (img == null) { \t \t img = new Изображение(); \t \t var timestamp = new Date(). GetTime(); \t \t img.src = 'Palette.png'; \t \t // скопировать изображение на холст \t \t // Исправление для Chrome (использует метку времени): \t \t $ (IMG) .load ('Palette.png метку времени =?' + Временную метку, функция () {// \t URL изображения в настоящее время ожидается и требуется в качестве первого параметра \t \t \t \t \t \t context.drawImage (IMG, 0, 0);. \t \t}); \t} – Zeek