jQuery animiert bei einer Bildersetzung

Lesezeit: 2 Minuten

Benutzer-Avatar
Lee

Ich hoffe, Sie können mich beraten. Ich möchte ein einfaches Einblenden eines Bildersatzes hinzufügen, den ich in ein ausgewähltes Menü eingehängt habe.

$("#vehicle").change(function(){
    var selected = $(this).val();
    $("#selectedVehicle").attr('src', '/assets/images/mini/'+selected+'.png');
});

<img id="selectedVehicle" src="https://stackoverflow.com/assets/v2/images/select-vehicle.png">

irgendwelche Vorschläge, wie ich es tun kann?

Dies funktioniert am besten, wenn Sie die Bilder vorab laden.

$("#vehicle").change(function(){
    var selected = $(this).val();
    var image = $("#selectedVehicle");
    image.fadeOut('fast', function () {
        image.attr('src', '/assets/images/mini/'+selected+'.png');
        image.fadeIn('fast');
    });
});

Dadurch wird das Bild ausgeblendet, die verändert srcund blenden Sie es dann wieder ein. Verweisen Sie auf die jQuery-Dokumentation für weitere Informationen zu den Fading-Funktionen.

Auch hier sollten Sie Ihre Bilder vorladen, da sie sonst während des Ladens ausgeblendet werden können.

  • Wäre es sinnvoll, wenn ich ein animiertes Lade-Gif fadeIn/fadeOut zwischen img fadeIn/fadeOut einfügen würde, damit ich die Bilder nicht vorab lade und das Bild einblende, wenn es vollständig geladen ist?

    – Natriumnitrat

    25. August 2013 um 14:02 Uhr

Ich habe mich dafür entschieden, das Bild beim Laden der Seite vorab zu laden, anstatt im laufenden Betrieb …:

$(document).ready(function () {
  function buildUrl(val) {
    return '/assets/images/mini/' + val + '.png';
  };

  $('#vehicle').change(function () {
    var value = $(this).val();

    $('#selectedVehicle').fadeOut('fast', function () {
      $(this).attr('src', buildUrl(value)).fadeIn('fast');
    });
  }).children('option').each(function () {
    var img = document.createElement("img");

    img.src = buildUrl($(this).val());
    img.onload = function () {};
  });
});

Beispiel mit “load”-Event:

$("#vehicle").on('change', function(){
  var selected = $(this).val();
  var image = $("#selectedVehicle");
  image.fadeOut('fast', function () {
     image.attr('src', '/assets/images/mini/'+selected+'.png');
  });
  image.one("load",function(){
    image.fadeIn('fast');
  });
});

  • image.on("load",function(){ image.fadeIn('fast'); });

    – Krishna Karki

    20. Dezember 2019 um 9:05 Uhr

  • Krishna Karki, können Sie kommentieren, warum Sie verwenden .on ist besser?

    – Arthur Shlain

    3. Oktober 2020 um 17:33 Uhr

  • Ich denke, dass sie dachte, es sei ein Tippfehler, obwohl es in Wirklichkeit keiner ist … https://api.jquery.com/one/

    – JSG

    14. September 2021 um 15:49 Uhr

1226470cookie-checkjQuery animiert bei einer Bildersetzung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy