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);
   };
});