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 https://stackoverflow.com/questions/11398005/jquery-lazyload-callback — dotchuZ, Aug 24 '18 at 08:49
bounty will be split between you and userlond, I can choose this feature when its expired — Bih Cheng, Aug 31 '18 at 12:49

score 8 · Accepted Answer · answered Aug 24 '18 at 08:29

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

Alexandre Elshobokshy · Answer 2 · 2018-08-24T08:56:05.460

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

score 1 · Answer 3 · answered Aug 31 '18 at 06:36

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 '18 at 06:36

Swapnil Sanu

76
4

Jquery Lazy Loading after image load, css is not applied

3 Answers3