wie von srcset

Question

höchste Auflösung Bild bestimmen, sagen, dass ich als
ein Bild haben

<img srcset="large.jpg 1400w, medium.jpg 700w, small.jpg 400w" 
    sizes="(min-width: 700px) 700px, 100vw" 
    alt="A woman reading"> 

Jetzt können diese auch wie

<img srcset="large.jpg 2x, medium.jpg 1.3x, small.jpg 0.8x" 
    sizes="(min-width: 700px) 700px, 100vw" 
    alt="A woman reading"> 

auch in einem Format vorliegen, (Kein gültiges HTML)

<img srcset="large.jpg 1400w, medium.jpg 1.3x, small.jpg 0.8x" 
    sizes="(min-width: 700px) 700px, 100vw" 
    alt="A woman reading"> 

Jetzt wie extrahiere ich URL, die das Bild mit der höchsten Auflösung hat.
Ich dachte, die srcset zu teilen und dann die Größe zu extrahieren, aber das Problem ist, dass Größen in 1200w Format oder in 2x Format oder in beiden und ich kann nicht unterscheiden, ob dies das 1200w Format oder 2x ist Format und selbst wenn ich herausfinden, was ist, wie vergleiche ich sie für die Bestimmung der größten Größe.

Ich wünschte, ich könnte zeigen, was ich versucht habe, aber es gibt nichts, was mir in den Sinn kommt, wie man das macht!

Answer 1

Nun, zuerst ist Ihr HTML-Code ungültig, weil Sie x und w Deskriptoren für srcset nicht mischen können. Wähle einen, aber nicht beides.

1) Sie können nicht wissen, welches Bild größer ist, wenn man sie alle, natürlich herunterladen Sie können - wenn Serverseite unterstützt - führen eine HEAD Anfrage für jedes Bild und überprüfen Content-Length Header-Eigenschaft. Es ist nicht einfach und was Sie bekommen, ist nur Bildgröße in Bytes, nicht seine Dimensionen, aber es ist eine gute Annäherung. Etwa so etwas wie dieses:

var sizes = []; 

// Peform this for each UR... 
$.ajax({ 
    type: "HEAD", 
    url: imageUrl, 
    success: function(data, textStatus, request) { 
     sizes.push({ 
      url: imageUrl, 
      size: parseInt(request.getResponseHeader("Content-Length")); 
     }); 
    } 
}); 

Sie einfach srcset Attribut URLs Aufspalten und ignorieren Größe Teil erhalten kann (ich bin sicher, dass jemand mit einer besseren Wissen über regex kann besser etwas tun):

var urls = srcset.replace(/\s+[0-9]+(\.[0-9]+)?[wx]/g, "").split(/,/); 

Anrufe können parallel oder - einfacher IMO - sequentiell mit Warteschlangen und $(document).queue() jQuery-Methode durchgeführt werden.

Dies kann nicht immer getan werden (vielleicht, weil Server akzeptiert keine HEAD oder Bildgrößen sind zu ähnlich, weil die Kompression und/oder Seitenverhältnisse), dann Sie Parsensrcset Attribut haben.

2) Lassen Sie uns zunächst einen Proof of Concept sehen (lesen als: es ist nicht vollständig noch effizient ist) von dem, was Sie für Pixeldichte Descriptor tun kann x: split mit über Leerraum .split(/ /) und dann größte Auswahl.

// Read value from tag...this is just for testing 
var srcset = "small.jpg 0.8x, large.jpg 1.5x, medium.jpg 1.3x"; 

var biggestImage = ""; 
var highestPixelDensity = 1; 

for (var descriptor of srcset.split(/,/)) { 
    var parts = descriptor.trim().split(/ /); 

    // Here we check only for pixel density, see later for 
    // width descriptor but code is straightforward 
    var pixelDensity = parseFloat(parts[1].substring(-1)); 
    if (pixelDensity > highestPixelDensity) { 
     biggestImage = parts[0]; 
     highestPixelDensity = pixelDensity; 
    } 
} 

Anders sieht es für die Breite Descriptor w weil es sizes bezieht müssen Sie dann zuerst bestimmen, welche angewendet wird.Es ist etwas mehr gewunden, aber es ist einfach, mit window.matchMedia() zu tun (auch hier ist es nicht vollständiger Code, sondern ein illustrativer proof of concept):

// Read this from tag... 
var sizes = "(min-width: 800px) 700px, (min-width: 700px) 300px"; 

for (var descriptor of sizes.split(/,/)) { 
    // Love this from https://stackoverflow.com/a/651646/1207195 
    var imageSize = descriptor.split(/[, ]+/).pop(); 

    // You still need to handle last item special case (where there is not media query). 
    var mediaQuery = descriptor.substring(-imageSize.length); 

    // You can stop with first matched media query, you have your required imageSize 
    var isMatch = window.matchMedia(mediaQuery).matches; 
} 

Jetzt haben Sie erforderliche Größe (seine Einheit überprüfen und entsprechend konvertieren, zum Beispiel this post) und Sie sind fertig, es mit der Breite des Deskriptors zu verwenden, die von srcset extrahiert wird.

Beachten Sie, dass Sie nicht wissen, welches Bild größer ist, wenn Sie es nicht herunterladen. Was Sie annehmen können, ist, dass höhere Pixeldichte x oder höhere Breite w (aber müssen in Bezug auf sizes Attribut Inhalt berechnet werden, größere Bildschirm verwendet größeres Bild) gibt Ihnen die größere. Natürlich ist es eine Annahme, dann kann es in einigen Fällen fehlschlagen. Um festzustellen, welche verwendet werden müssen, ist einfach:

var isPixelDensity = srcset.trim().substr(-1) === "x"; 

nur ... diese Proben zusammengestellt, behandeln Ecken Fällen grundlegende Fehlerbehandlung und Browser-spezifische Themen fehlt und fertig ...

Answer 2

ich brauchte das gleiche für Wordpress Bilder erzeugt und relevante srcset

Wordpress erstellt die srcset in einer Art und Weise zu tun, dass das kleinere Bild kommt zuerst und dann hält sie auf der Erhöhung, bis es das größte Bild in srcset bekommt.

Beispielbild Code von Wordpress generiert:

<img width="300" height="221" src="http://www.example.com/wp-content/uploads/2017/01/Sharon-Ron-Chip-300x221.jpg" class="vc_single_image-img attachment-medium" alt="" srcset="http://www.example.com/wp-content/uploads/2017/01/Sharon-Ron-Chip-300x221.jpg 300w, http://www.example.com/wp-content/uploads/2017/01/Sharon-Ron-Chip-768x566.jpg 768w, http://www.example.com/wp-content/uploads/2017/01/Sharon-Ron-Chip-1024x755.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px"> 

auch in einigen Fällen, wenn das Bild zu klein ist, dann Wordpress erstellt keine srcset überhaupt Attribut.

Also, das ist, was ich tat: (CHANGE my_image_class_to_target im Code zum gewünschten Zielklasse)

jQuery('img.my_image_class_to_target').each(function() { 
    var mysrcset = jQuery(this).attr('srcset'); 
    if (typeof mysrcset !== 'undefined'){ //checking if the srcset attribute is defined 
     lastsrcset = mysrcset.split(','); 
     lastsrc = lastsrcset[(lastsrcset.length - 1)]; 
     lastpuresrc = lastsrc.split(' '); 
     mysrc = lastpuresrc[1]; 

    } else { //when srcset is not defined in case of small images 
    var mysrcset = jQuery(this).attr('src'); 
     mysrc = mysrcset; 
    } 

    // display or use src of biggest image src 
    console.log(mysrc); 

}); 

Ich bin neu in Javascript/jQuery, also bitte verzeihen, wenn ich einen längeren Weg genommen haben. ;)

Alle Ergänzungen/Updates zum Code sind willkommen.