javascript - 图像加载后的 Jquery 延迟加载，不应用 css

Question

我在 jQuery Lazy - Delayed Content, Image and Background Lazy Loader 中使用这个插件

我试图在延迟加载后向图像添加图像边框颜色和图像边框厚度，但它似乎没有效果。如果我在开发人员控制台按“检查”，我可以看到此属性已添加到图像样式，但其效果未显示在屏幕上。

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