如何为 data-src 设置自定义 CSS

Question

我知道我们可以通过 id 或其类为图像设置 css。我在网站上的图片编码如下

    <img class="img-responsive" id="loader" src="{{asset('img/loader.gif')}}" data-src="{{asset('uploads/banner01.jpg')}}" >

图片的属性

• 加载器.gif

      Width:200px
      Height:200px
  

• banner01.jpg

     Width:500px
     Height:400px
  

通过加载器 id 添加的自定义 CSS

#loader{
    width: 200px;
    height: 200px;
      }

我的问题是，当我添加这个自定义 CSS 时，它适用于宽度 200px 和高度 200px，但它也适用于 banner01.jpg。

意味着即使横幅宽度为 500 像素，高度为 400 像素，在加载图像后它显示为 200 像素 X 200 像素的图像。

我想知道的

有没有办法给data-src添加自定义css？

---

Answer 1

有一种更好的解决方案可以在页面渲染后加载图像、视频和内容，称为延迟加载。 有一个非常简单的 JQuery 插件，只需几行代码即可实现。

http://jquery.eisbehr.de/lazy/

只有三个步骤。

1. 添加CDN或下载并链接插件。

   2.img标签的class属性添加“lazy”

   例如： <img class="lazy" data-src="images/1.jpg" />

3.添加这个JQuery函数。

<script>
  $(function() {
    $('.lazy').lazy();
  });
       </script>

要添加用于加载的 gif，只需将您的函数更改为此。

// plugin build-in placeholder management
    $(function() {
        $('.lazy').lazy({
            placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
        });
    });

要查看演示，请查看此链接。 http://jquery.eisbehr.de/lazy/example_basic-usage

Answer 2

您将尝试以下自定义 css

img:not([data-src$="loader.gif"]) {
   Width:500px
   Height:400px
}

Answer 3

我认为您应该将这两个图像加载到两个图像标签中。并将其放在同一个div中。 并将这个 css id 放到 div 中。

<div id="loader">

   <img class="img-responsive" src="{{asset('img/loader.gif')}}">
   <img class="img-responsive" data-src="{{asset('uploads/banner01.jpg')}}" style="width:500px;height:400px">

</div>