Herunterladen von bereits zwischengespeicherten Bildern

Ich versuche eine Webanwendung zu erstellen, die Bilder zwischenspeichert, die heruntergeladen werden sollen.Herunterladen von bereits zwischengespeicherten Bildern

Sagen Sie bitte die folgenden html haben:

<a href="http://example.com/image.jpg" download=""> 
    <img src="http://example.com/image.jpg" alt="Image"/> 
</a>

Wenn Sie rechts auf dem Bild klicken und speichern klicken, um es direkt das Bild speichert. Wenn Sie jedoch auf den Link klicken (oder ihn mit Javascript aktivieren), muss er das gesamte Bild erneut herunterladen, obwohl es sich bereits im Cache befindet.

Gibt es eine Möglichkeit, das Bild zu speichern, ohne es erneut herunterladen zu müssen? (Oder um es auf andere Weise zu cachen, vielleicht durch Erstellen eines Blobs oder einer Daten-URL?)

Vielen Dank!

Quelle

2017-06-27 J. Doe

Ich hoffe, jemand kann mich falsch beweisen, aber ich glaube nicht, dass dies möglich ist. Es scheint [du bist nicht der erste, der nach etwas in dieser Richtung fragt] (https://stackoverflow.com/questions/7264557/javascript-how-to-cache-a-file-to-download-then-trigger -Download-on-Requests). Leider enthält dies nicht gerade eine Tonne hilfreicher Informationen - die Frage scheint nicht genügend Aufmerksamkeit erhalten zu haben, dachte, dass sie möglicherweise mit der Idee sprechen könnte, dass es tatsächlich nicht möglich ist. – Santi

Das einzige, was ich mir vorstellen kann und ich bin vielleicht weg (* das ist, warum dies ein Kommentar ist *) verwendet ** HTTP2 **? Auf diese Weise sendet der Server das Bild an den Browser, bevor der Browser es benötigt. – Christian4423

Vielleicht Cache manuell mit AJAX? –

Versuchen Servicemitarbeiter die Anforderungen cachen:

etwas wie folgt aus:

index.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
</head> 
<body> 
    <a href="https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png" download=""> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png" alt="Image"/> 
    </a> 
    <script src="test.js"></script> 
</body> 
</html>

Skriptdatei (test.js):

caches 
    .open('assets') 
    .then(cache => cache.addAll([ 
     'https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png' 
    ])) 
    .then(() => 
     navigator.serviceWorker.register('cache-image.js', { scope: './' }) 
      .then(navigator.serviceWorker.ready) 
    )

Servicearbeiter selbst (cache-image.js):

// this is the service worker which intercepts all http requests 
self.addEventListener('fetch', function fetcher (event) { 
    var request = event.request; 
    // check if request 
    if (request.url.indexOf(
     'Pencil-ruler_icon.png' 
    ) > -1) { 
    // contentful asset detected 
    event.respondWith(
     caches.match(event.request).then(function(response) { 
     // return from cache, otherwise fetch from network 
     return response || fetch(request); 
     }) 
    ); 
    } 
});

Quelle

2017-06-27 20:57:47

Herunterladen von bereits zwischengespeicherten Bildern

Antwort

Verwandte Themen