Search the Community
Showing results for tags 'blazy'.
Found 1 result
I'm using blazy.js to delay loading images below the DOM. Whilst images are scrolled into the viewport it displays an animated gif, which is replaced by the desired image once loaded. The images are in the right column of the W3schools website template using this html: <div class="w3-row w3-padding-64"> <div class="w3-twothird w3-container"> <h1 class="w3-text-teal">Header Text</h1> <p>Main Text</p> </div> <div class="w3-third w3-container"> <p class="w3-border w3-padding-large w3-padding-32 w3-center"><img class="b-lazy" src=/img/loading.gif; data-src="/img/bigimage.jpg" alt="Picture" style="width: 100%;"></p></p> </div> </div> The script is from here: http://dinbror.dk/blazy/ The js script functions well, on the W3Template, but the loading.gif is displayed gigantic to fill the container width. (Same in FF and safari browsers.) (When I tried the Author's base64 method below; no loader displays at all on the template, then the bigimage shows up.) <img class="b-lazy" src=data:image gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="/img/image.jpg" alt="alt-text" /> The animated loading.gif is only 43px wide and 15px high, but because of the style="width:100%" it fills and expands with the container. How can I adjust the code so the loading.gif displays as 43px by 15px, but when the data-src image has loaded it displays to fill the container? In other words, how can I prevent the style="width: 100%;" applying to the animated gif?