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

Answer 2

我建议这样做：

contract ServiceContract {


    constructor (address _storeC, address _quizC, address _signC) {

        StorageContract storeC = StoreContract(_storeC);
        QuizContract quizC = QuizContract(_quizC);
        SignatureContract signC = SignatureContract(_signC);
    }


    function storeData (bytes32 data) public {
        storeC.save(data);
    }

    function getAnswer( bytes32 question) public constant returns (bytes32) {
       return quizC.get(question);
    }

    function sign (bytes32 data) public returns (bytes32) {
        return signC.sign(data);
    }

}

通过使用$('img.lazy').Lazy({ scrollDirection: 'vertical', visibleOnly: false, afterLoad: function(element) { element.css('border', 'thick solid chartreuse'); } });，您将不会丢失任何参数！ :)同样，执行相同操作的代码越少越好。

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

JSFiddle demo

Answer 3

您只能使用border属性，并按如下所示进行设置

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

图像加载后jQuery懒加载，不应用css

3 个答案: