Wymuszenie buforowania obrazów za pomocą javascript

Question

Próbuję sklonować obraz generowany losowo. Mimo że używam dokładnie tego samego adresu URL, inny obraz to obciążenie. (testowane w chrome i firefox)

Nie mogę zmienić serwera obrazu, więc szukam czystego rozwiązania javascript/jQuery.

Jak zmusić przeglądarkę do ponownego użycia pierwszego obrazu?

Firefox:

Chrome:

Spróbuj to sam (być może trzeba przeładować go kilka razy, by go zobaczyć)

Kod: http://jsfiddle.net/TRUbK/

$("<img/>").attr('src', img_src) 
$("<div/>").css('background', background) 
$("#source").clone() 

Demo: http://jsfiddle.net/TRUbK/embedded/result/

Answer 1

Nie można zmienić serwera obrazu, jeśli nie jest on twój, ale możesz z łatwością napisać coś na swoim serwerze, aby sobie z nim poradzić.

Pisać coś w swoim języku po stronie serwera z wyboru (PHP, ASP.NET, cokolwiek), że:

1. Hits http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes i pliki do pobrania niego. Generujesz klucz na jeden z dwóch sposobów. Zyskaj mieszankę (MD5 powinno być w porządku, nie jest to związane z bezpieczeństwem, więc obawia się, że jest za słabe, te dni nie mają zastosowania). Lub uzyskaj rozmiar obrazu - ten ostatni może mieć kilka duplikatów, ale jest szybszy do wytworzenia.
2. Jeśli obraz nie jest jeszcze zapisany, zapisz go w lokalizacji, używając tego klucza jako części nazwy pliku, a typ zawartości jako inną część (w przypadku, gdy jest mieszanka plików JPEG i PNG).
3. Odpowiedz na odpowiedź XML lub JSON z identyfikatorem URI dla następnego etapu.

W kodzie strony klienta trafia się ten URI przez XmlHttpRequest, aby uzyskać identyfikator URI do wykorzystania z obrazami. Jeśli chcesz nowy losowy, ponownie naciśnij ten pierwszy identyfikator URI, jeśli chcesz ten sam obraz dla dwóch lub więcej miejsc, użyj tego samego wyniku.

Ten identyfikator URI ma wartość podobną do http://yourserver/storedRandImage?id=XXX, gdzie XXX jest kluczem (hash lub rozmiar zgodnie z powyższą decyzją). Program obsługi wyszukuje zapisane kopie obrazów i wysyła plik w dół strumienia odpowiedzi z poprawnym typem zawartości.

To wszystko jest bardzo łatwe technicznie, ale możliwy problem jest legalny, ponieważ przechowujesz kopie obrazów na innym serwerze, możesz przestać być zgodny z warunkami umowy z usługą wysyłania losowych obrazy.

Answer 2

Nagłówki wysyłane ze skryptu generatora obrazów losowych zawierają deklarację Cache-Control: max-age=0, która zasadniczo mówi przeglądarce, aby nie buforowała obrazu.

Musisz zmodyfikować skrypt/serwer generatora obrazów, aby wysyłać odpowiednie nagłówki buforowania, jeśli chcesz, aby wynik był buforowany.

Należy również upewnić się, że adres URL pozostaje taki sam (nie patrzyłem na ten aspekt, ponieważ przekazywano mnóstwo parametrów).

Answer 3

Powiedz to, aby zatrzymać się losowo obraz, wydaje się działać tak, jak chcesz, kiedy dodać ten trzeci zastąpić połączenia:

// Get the canvas element. 
var background = ($("#test").css('background-image')), 
img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'') 

Answer 4

try:

var myImg = new Image(); 
myImg.src = img_src; 

a następnie dołączyć "myImg" tam, gdzie chcesz:

$(document).append(myImg); 

Answer 5

Po pierwsze, możesz "wymuszać" wszystko w sieci. Jeśli chcesz wymusić pewne rzeczy, to tworzenie stron internetowych jest dla ciebie niewłaściwym medium.

Można spróbować użyć canvas element do skopiowania obrazu. Zobacz przykłady: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images.

Answer 6

Zrobiłem to z skryptach Skrzypek i dostał ten sam obraz za każdym razem

#test { 
background:url(http://a.random-image.net.nyud.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes); 
width: 150px; 
height: 150px; 

}

zanotować .nyud.net po nazwie domeny.

Answer 7

Możesz spróbować zapisać reprezentację obrazu w base64.

Załaduj obrazek w ukrytym div/canvas, a następnie przekonwertuj go w base64. (Nie jestem pewien, czy płótno można ukryć, czy też można go przenieść za pomocą znacznika html4). Teraz możesz przechowywać "usztywniony" obraz w ciasteczku i używać go bez ograniczeń ...

Answer 8

wydaje się, że dwa obejścia:

1. Jeśli pójdziesz metodą płótnie, czy można uzyskać obraz, aby załadować na samą płótnie, dzięki czemu można manipulować dane obrazu bezpośrednio zamiast tworzenia 2nd żądanie http obrazu. Możesz przesłać dane obrazu bezpośrednio na drugie płótno.
2. Jeśli masz zamiar zbudować serwer proxy, możesz poprosić serwer proxy o usunięcie dyrektywy No-Cache, aby kolejne żądania przeglądarki używały pamięci podręcznej (tutaj nie ma gwarancji - zależy to od ustawień przeglądarki/użytkownika).