Jquery Lazy在图像加载后加载,不应用css

Question

我正在使用jQuery Lazy中的这个插件- 延迟内容,图像和背景懒惰加载器

我试图在延迟加载后向图像添加图像边框颜色和图像边框厚度,但似乎没有任何效果.如果我在开发者控制台上按"检查",我可以看到这些属性被添加到图像样式但其效果未显示在屏幕上.

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-styleCSS属性是必需的.默认值为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');
    }
});

现场演示

Answer 2

我建议这样做:

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

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

        }
    });

通过使用border你不会缺少任何参数!:)同样少的代码做同样的事情总是更好.

我准备了一个带有大文件和加载动画的演示,所以你可以在图像加载和边框生效之前注意到延迟加载.

JSFiddle演示