Jquery функция, чтобы проверить, загружен ли SRCset изображения Fini sh

Question

Мне нужно изменить функцию, которая изменяет изображение через SRCset. Прямо сейчас я могу проверить, изменился ли атрибут srcset. Это нормально. Но при медленных соединениях атрибут srcset изменяется, и через несколько секунд изображение само меняется в представлении браузера.

Есть ли способ проверить, действительно ли отображение изображения действительно загружается, а не только изображение? атрибут?

Я пробовал MutationObserver, .load (), .onLoad () и т. д. c

Извините, если это не ясно или вопрос просто тупой

Спасибо

Редактировать:

Решение в конце было примерно таким:

var previewIMG = jQuery(this).find('.product-grid-image img');
var swatchImgSRC = jQuery(this).attr("data-product-sku");


previewIMG.one("load", function(){
  LoadingDiv.removeClass('active-loading');
}).attr("srcset", swatchImgSRC);

Answer 1

Я думаю jQuery Один может помочь вам здесь, будь то с sr c или srcset!

var newsrc="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wikipedia-logo-v2-fr.svg/1200px-Wikipedia-logo-v2-fr.svg.png";
$("img").click(function() {
    $("img").one("load", function() {
        $("#info").append("loaded!");
    }).attr("src", newsrc);
});

  <h1 id="info"></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<img src="https://srcset.salcode.com/images/2000x1000.png" style="width:300px;">

Что бы вы ни хотели делать и быть уверенным, что изображение загружено, вы можете позвонить рядом с примером append () здесь.

Answer 2

onLoad () должно работать:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Big_Mac_hamburger.jpg/1024px-Big_Mac_hamburger.jpg" id="myImg" alt="mmmm bigmac"/>

const img = document.getElementById('myImg');
img.onload = e => {
      console.log('img loaded !');
}

будет печатать 'img загружен', только когда он полностью загружен.