jQuery append img src

Wie kann ich hinzufügen "_small.jpg" für die img-src ein paar Bilder habe ich in einem div namens "Banner"?

Ich habe ein jQuery-Skript, das hören für Fenster ändert - und wenn unten 400px ich ändern wollen, img src-Bilder zu zählen "_small.jpg" am Ende nennen Sie in der kleinen image-Quelle. So...

<img src="example.jpg" />

beim Blick auf den Bildschirm-Größen unter 480px würde dann

<img src="example_small.jpg" />

Wie kann ich dies tun?

P. S. ich würde gerne das script eine Schleife durch alle Bilder in der "Banner" div, Sie zu aktualisieren, btw 🙂

  • Ich denke, das ist kein netter Zug, denn wenn Sie die src-set zu example.jpg in den html-Code, die Bilder werden trotzdem geladen und dann ersetzt werden, wenn Sie fügen Sie die _small string. Ich würde entweder verlassen Sie die src leer ist und laden Sie alle Bilder mit js (je nach Bildschirmgröße) oder die Größe der Bilder in der css.
  • Stattdessen halten Sie ein Bild und geben max-width:100%
  • Ich möchte zum laden ein anderes Bild mit unterschiedlichen Aspekt-Verhältnis für kleine Anwendungsfälle auf dem Karussell - daher die Frage - halten die gleiche Quelle auf 100% ist einfach - aber es bedeutet, dass Sie ein Karussell, das sieht nett aus auf den desktop und Mist auf mobile, wenn Sie die gleichen img src skaliert die Breite unter Beibehaltung der aspect ratio 🙂
InformationsquelleAutor dubbs | 2014-03-10
  1. 0

    Können Sie versuchen:

    //define this somewhere in your code (credit: https://stackoverflow.com/questions/280634/endswith-in-javascript)
function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

if ($(window).width() < 480) {
  $("div.banners img").each(function() {
    if (!endsWith($(this).attr('src'), '_small.jpg')) {
      //if you have more than "jpg" files you will want to replace those as well
      $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_small.jpg');
    }
  });
}

    Ich glaube, das sollte es tun!

    Bearbeiten - Hinzugefügt eine Erweiterung entfernen, die basierend auf einen Kommentar. Weitere Informationen zum austauschen von Erweiterungen finden Sie unter dieser stack.

    Edit 2 - Hinzugefügt eine überprüfung für "endswith", falls die Funktion aufgerufen wird, die auf Elemente, die bereits über die kleine Erweiterung Hinzugefügt!.

    • Dies hätte zur Folge src="example.jpg_small".
    • Sind Sie richtig! Ich denke, dass sollte es jetzt tun.
    • Bekomme ich syntax Fehler mit diesem Ansatz?
    • Sollte korrigiert werden. Sorry!
    • getan. eine schöne Lösung, aber das Problem hier ist, wenn mit dieser auf eine fluid-responsive-Ansatz, ich bin die Prüfung zu prüfen, die Größe des Fensters auf jede Veränderung der browser-Größe, die dann wieder funktioniert dieses Skript fügt dazu _small.jpg wieder... die Pausen... alle Weg, nur so dass es hinzufügen _small.jpg wenn nicht bereits getan?
    • Ich habe eine Funktion aufrufen, um "endsWith" zu stellen Sie sicher, dass die Bildquelle nicht haben "_small.jpg" schon. Viel Glück!
    • danke - aber das scheint nicht zu funktionieren... auf die Größe, das script ist immer noch das brennen und das hinzufügen _small zu den JPEGs...
    • Sollte dies wirklich in der Nähe. Es könnte sein, ein Problem mit der oberen versus unteren Fall oder etwas entlang jenen Linien. Debuggen über Ihre browser-tools, und ich denke, Sie sollten in der Lage sein, um es herauszufinden gibt. Happy hunting!
    • hmmm... etwas, was nicht richtig ist... keine chance auf einen jfiddle Beispiel, dass es funktioniert?
    • fand es.... if (!endsWidth($(this).attr('src'), '_small.jpg')) { ... sein sollte, wenn (!endsWith($(this).attr('src'), '_small.jpg')) {
    • Mein schlechtes! Habe die Feste Antwort. Fühlen Sie sich frei, um die Marke als korrekt, wenn es funktioniert : )
    • nur angekreuzt, es // danke 🙂

    InformationsquelleAutor drew_w
  2. 1

    Können Sie tun:

    $("div.banners img").each(function() {
    $(this).attr("src", function() {
        var src = this.src.split(".")[0];
        return src + "_small.jpg";
    });
});

    (Der oben nimmt an dem Namen des Bildes ohne "." in Ihnen, und Sie alle haben eine Art von JPEG)

    • Sie nicht brauchen, um zu Durchlaufen und die Bilder $('div.banners img').attr genug sein sollte, jsfiddle.net/Alfie/SrH8X
    InformationsquelleAutor tymeJV
  3. 0

    Können Sie versuchen, mit:

    var src = $('img').attr('src'),
    ext = src.substr( src.lastIndexOf('.') );

src = src.replace(ext, '_small' + ext, src);

$('img').attr('src', src);

    Oder mit regex:

    var src = $('img').attr('src'),
    src = src.replace(/(\..*)$/, '_small$1', src);

$('img').attr('src', src);
    InformationsquelleAutor hsz
Schreibe einen Kommentar