Jquery 图片加载后延迟加载，css 未应用

Question

我在jQuery Lazy - Delayed Content, Image and Background Lazy Loader

中使用这个插件

我试图在延迟加载后为图像添加图像边框颜色和图像边框粗细，但似乎没有效果。如果我在开发者控制台按 "inspect"，我可以看到这个属性被添加到图像样式，但它的效果没有显示在屏幕上。

HTML

<img class="lazy" data-src= "{{ individual_image.url }}" src="{% static 'img/image_loading.jpg' %}"style="opacity:0.3; width:150px; height:150px;>

JQuery

        $('img.lazy').Lazy({

            scrollDirection: 'vertical',                
            visibleOnly: false,               
            afterLoad: function(element) {                   
                element.css('border-width', 'thick');
                element.css('border-color', 'chartreuse');                    

            }
        });

Answer 1

Border-style CSS 属性是必需的。默认值为 none，因此不显示边框。

$('img.lazy').Lazy({
    scrollDirection: 'vertical',                
    visibleOnly: false,               
    afterLoad: function(element) {                   
        element.css('border-width', 'thick');
        element.css('border-color', 'chartreuse');
        // add border-style and border becomes visible                    
        element.css('border-style', 'solid');
    }
});

Live demo

Answer 2

我建议这样做：

    $('img.lazy').Lazy({

        scrollDirection: 'vertical',                
        visibleOnly: false,               
        afterLoad: function(element) {                   
            element.css('border', 'thick solid chartreuse');                  

        }
    });

通过使用border，您将不会遗漏任何参数！ :) 同样，做同样事情的代码越少越好。

我准备了一个包含大文件和加载动画的演示，因此您实际上可以在图像加载和边框生效之前注意到延迟加载。

JSFiddle demo

Answer 3

只能使用border属性，如下设置

$('img.lazy').Lazy({

  scrollDirection: 'vertical',
  visibleOnly: false,
  afterLoad: function(element) {
    element.css('border', 'width style color');

  }
});

Jquery 图片加载后延迟加载，css 未应用

Jquery Lazy Loading after image load, css is not applied

javascript

css

jquery

lazy-loading