Menu
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');
}
});
458
With browser lazy loading, you only need to add a loading attribute with a value of lazy to the img tag in the HTML markup. Put simply, all you need to do is tell the browser which images to lazy load. No JavaScript, APIs, or calculations required.
What is Image Lazy Loading? Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time - when those images are actually needed, instead of loading them up front.
While <img> tags are the most common way of using images on web pages, images can also be invoked via the CSS background-image property (and other properties). Browser-level lazy-loading does not apply to CSS background images, so you need to consider other methods if you have background images to lazy-load.
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
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
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
