Jump to content
GratefulAlive

W3school Template and delayed img loading

Recommended Posts

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?

Share this post


Link to post
Share on other sites

What I like about the w3 Template is that the image is small in the side column, but on smaller viewports shifts to the centre column and become MUCH larger... retina quality without fussing over retinax2 formats of my images.

It's just the loader being enormous too!

I'm fiddling whilst waiting for some kid expert to respond, but so far all my fumbles have failed.

I think the BBC site uses a form of blazy.js  it functions well.

I could delete the loader image call, but that's admitting failure, and we just don't quit, do we?

 

Share this post


Link to post
Share on other sites

Use both images, with lthe oading gif using position absolute, with z-index lower than that of the main image, when the main image loads it will overlap the loading gif.

with them being individual you can set the required size without affecting the other, and centralize the loading gif if you want.

Share this post


Link to post
Share on other sites

You are doing it wrong! the loading gif is a centralised background image of the element surrounding the main image, the container element has class 'loading', this class makes the loading gif background image appear, when the main image is loaded fully a callback is made on success to remove the class name 'loading'  which results in removing this loading background image.

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script>

        </script>

        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <style type="text/css">
            .image-wrapper {
                /*  // Adding a loader and background color. The user will see it
                  // if the image is loading slow. */
                background: #FFF url('loader.gif') center center no-repeat;

            }
            .ratio_16-9 {
                /*     // The image has a 16/9 ratio. Until the image has loaded
                     // we need to reserve some space so the page won't reflow.
                     // How to calculate the space (padding-bottom): 9/16*100 = 56.25
                     // Another example: you have an image 400x250.
                     // So if you want to calculate the space you do: 250/400*100 = 62.5 */
                padding-bottom: 56.25%;
                height: 0;
            }
            .b-lazy {
                max-width: 100%;
            }
            .w3-third {width: 100% !important;}
        </style>
    </head>
    <body>
        <div class="w3-container">
            <div class="w3-row w3-padding-64">

                <div class="w3-container">
                    <h1 class="w3-text-teal">Header Text the 'image-wrapper' is class that has loader.gif BG image, which once removed, the background image is removed also.</h1>
                    <p>Main Text</p>
                </div>
                <div class="w3-third w3-container">
                    <p class="w3-border w3-padding-large w3-padding-32 w3-center image-wrapper">
                        <img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://www.w3schools.com/w3images/la.jpg" data-src-small="https://www.w3schools.com/w3images/chicago.jpg" alt="Picture" style="width: 100%;">

                    </p>

                </div>
                <div class="w3-third w3-container">
                    <p class="w3-border w3-padding-large w3-padding-32 w3-center image-wrapper">
                        <img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="../../images/Chrysanthemum6meg.jpg" data-src-small="../../AlienVsPredator.jpg" alt="Picture" style="width: 100%;">

                    </p>

                </div>
                <div class="w3-third w3-container">
                    <p class="w3-border w3-padding-large w3-padding-32 w3-center image-wrapper">
                        <img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://www.w3schools.com/w3images/chicago.jpg" data-src-small="https://www.w3schools.com/w3images/la.jpg" alt="Picture" style="width: 100%;">

                    </p>

                </div>
            </div>
        </div>

        <script src="blazy.min.js"></script>
        <script type="text/javascript">
            var bLazy = new Blazy({
                breakpoints: [{
                        width: 420 // Max-width
                        , src: 'data-src-small'
                    }]
                , success: function(element) {
                    setTimeout(function() {
                        // We want to remove the loader gif now.
                        // First we find the parent container
                        // then we remove the "loading" class which holds the loader image
                        var parent = element.parentNode;
                        parent.className = parent.className.replace(/\bimage-wrapper\b/, '');
                    }, 1000);
                }
            });
        </script>

    </body>
</html>

The base64 image is transparent gif image, whatever the image container class that will show loader.gif background-image ('image-wrapper') must be the same as shown in removal code

parent.className = parent.className.replace(/\bimage-wrapper\b/, '');

Share this post


Link to post
Share on other sites

Thank you Sir!

I copied your sample code as is, and then adjusted the image and js locations to suit my server... and it functions perfectly.

I'm sure your responses will help many others who come along here in future.

With much respect and gratitude.

 

Share this post


Link to post
Share on other sites

One further query, if I may,

I now have the loader.gif displaying nicely as expected, using your suggested code.

But what does this code do?

var bLazy = new Blazy({
                breakpoints: [{
                        width: 420 // Max-width
                        ,  src: 'data-src-small'
                    }]

When I reduce the viewport below 420px I see the same image made smaller, as expected, BUT when I swap the html line data-src-small="/img/different.jpg to another image in the same container, I only see the original data-src="/img/original.jpg

So the js line
,  src: 'data-src-small'

Doesn't appear to do anything on my test.

Doubtless I've missed something.

NB. I should mention; I had to remove the on-page style
}
            .w3-third {width: 100% !important;}

To get the full template to display properly.
I assume you added that style merely to ensure your trial page displayed.

Edited by GratefulAlive

Share this post


Link to post
Share on other sites
11 hours ago, dsonesuk said:

You have to view through smaller device, not reduce browser viewport of desktop browser.

As described here http://dinbror.dk/blog/blazy/?ref=demo-page#Multi

 Thank you, you are spot-on!

The Author of the blazy script wrote...

Quote

It means that it’ll look at your screen width which won’t change when you resize your browser window.

 

I've put alternative small images on my test site, so now I'll pedal off to find an iPhone in a mall to check :)

Many thanks dsonesuk: 

Listening to Norwegian, Kirsten Flagstad right now... 

HenryPurcell's Dido and Aeneas: When I Am Laid In Earth.

 

Edited by GratefulAlive

Share this post


Link to post
Share on other sites

Verified on various sizes of iPhones and iPads: Works perfectly, as expected :) thanks to dsonesuk!

Now I can make my alternate images considerably "lighter" since "retina quality" isn't required, even on small retina screens, and this modification will make them snappy loading.

(I tried using Samsung, and the ubiquitous Chinese Oppo etc phones too, but could not master the weird keyboards!)

Edited by GratefulAlive

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×