Jump to content

Search the Community

Showing results for tags 'blazy'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. GratefulAlive

    W3school Template and delayed img loading

    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?
×