在后台加載圖片而不應用CSS樣式

Question

你能幫助我嗎？ 我正在使用腳本來設置已加載的圖像，但是樣式並未一起應用。

$('img[data-src]').each(function() {
   var img = $(this);
   var newimg = new Image();
   newimg.src = img.attr('data-src');
   newimg.setAttribute('class', img.attr('data-src'));
   newimg.onload = function() {
   img.replaceWith(newimg);
   };
});

我不能在這里放置HTML和CSS樣式，因為每個<img>標記都有自定義樣式，因此我需要使上面的腳本能夠繼承樣式。

我應該怎么做才能解決這個問題？ 謝謝

Answer 1

那是因為您正在創建一個新的元素，該元素不具有相同的class和style屬性。 只需將它們復制到新元素。

$('img[data-src]').each(function() {
   var img = $(this);
   var newimg = new Image();
   newimg.src = img.attr('data-src');
   newimg.setAttribute('class', img.attr('class'));
   newimg.setAttribute('style', img.attr('style'));
   newimg.onload = function() {
   img.replaceWith(newimg);
   };
});