Jquery Lazy Loading after image load, css is not applied

Question

I'm using this plug in jQuery Lazy - Delayed Content, Image and Background Lazy Loader

I'm trying to add image border-color and image border thickness to the image after lazy loading but it seems like it has no effect. If I press "inspect" at developer console, I can see this attributes are added to image style but its effect is not shown on screen.

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');                    

            }
        });

might also help to use the search stackoverflow.com/questions/11398005/jquery-lazyload-callback — dotchuZ
– dotchuZ, Commented Aug 24, 2018 at 8:49
bounty will be split between you and userlond, I can choose this feature when its expired — Bih Cheng
– Bih Cheng, Commented Aug 31, 2018 at 12:49

userlond · Accepted Answer · 2018-08-24 08:29:09Z

8

+50

Border-style CSS attribute is required. Default value is none, so border is not displayed.

$('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

answered Aug 24, 2018 at 8:29

userlond

3,8442 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandre Elshobokshy · Accepted Answer · 2018-08-24 08:56:05Z

8

I would suggest doing it this way :

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

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

        }
    });

By using border you won't be missing any parameters! :) Also less code to do the same thing is always better.

I prepared a demo with a large file and a loading animation so you could actually notice the lazy loading before the image loads and the border takes effect.

JSFiddle demo

edited Aug 24, 2018 at 8:56

answered Aug 24, 2018 at 8:33

Alexandre Elshobokshy

11k6 gold badges35 silver badges61 bronze badges

Comments

Swapnil Sanu · Accepted Answer · 2018-08-31 06:36:52Z

1

You can use the border attribute only and set it like below

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

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

  }
});

answered Aug 31, 2018 at 6:36

Swapnil Sanu

764 bronze badges

Collectives™ on Stack Overflow

Jquery Lazy Loading after image load, css is not applied

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related