html - 如何为数据源设置自定义 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
  

通过 loader id 添加的自定义 CSS

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

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

加载图片后，横幅宽度为 500 像素，高度为 400 像素，它显示为 200 像素 X 200 像素的图片。

我想知道的

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

---

Answer 1

有一种更好的解决方案可以在页面呈现后加载图像、视频和内容，称为延迟加载。 有一个非常简单的 JQuery 插件可以用很少的代码行来实现它。

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

只有3个步骤。

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