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

Question

我正在使用这个插件jQuery延迟内容、图像和背景延迟加载程序

我尝试在延迟加载后向图像添加图像边框颜色和图像边框厚度，但似乎没有效果。若我在开发者控制台按“inspect”，我可以看到这个属性被添加到图像样式中，但它的效果并没有显示在屏幕上。

超文本标记语言

<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属性，并按如下所示进行设置

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

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

  }
});

Answer 2

我建议这样做：

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

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

        }
    });

通过使用边框您将不会丢失任何参数！：）同样，做同样事情的代码越少越好。

我准备了一个大文件和加载动画演示，这样你就可以在图像加载和边框生效之前注意到延迟加载。

JSFIDLE演示

Answer 3

边框样式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');
    }
});

现场演示