javascript - 在后台加载图像而不应用 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);
   };
});