Deferring images

JavaScript
1

Hi

I want to try deferring images as in this article https://varvy.com/pagespeed/defer-images.html
but have noy got very far.

I used Gimp to produce an empty, square, small image (97bytes)

I used https://www.base64-image.de/ to produce the required base64 string

iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==

I tried aa few things but can’t quite get it how to use this on the html for each image,

say, I have this image in the html

<img src="../images/ParallelBcn2.jpg" width="200" height="150" alt="Hotel Parallel Barcelona">

The article says the code should be so:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

so, I assume that I replace the part after base64, with the code I got above

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="../images/ParallelBcn2.jpg" width="200" height="150" alt="Hotel Parallel Barcelona">

I placed the script at the bottom, but when I open the page nothing happens…

The test page is here

http://pintotours.net/Europe/Spain/FAKE.html

Am I supposed to amend the script and give it a certain delay in miliseconds?

Thank you

EDIT

Looking at FF WebConsole, the script (which is at the very end of the page) does not seem to load at all…

Could that be the problem?

2

Hi there qim,

it does work. :ok:

Obviously you won’t believe my word on this, so disable javascript
and you will see that all the selected images will be base64, :ballot_box_with_check:

Enable javascript and the data-src images will be displayed. :on:

All but three that is. :ng:

They appear to have a rogue double quote (") in the data-src attribute. :mask:

coothead

3

Strange…

Yesterday, no matter what I tried (including clearing cache every 5 minutes) it did not work. Now, after reading your post it works! Maybe the images get deferred by 12 hours…

Incidentally, I looked at your latest widget and it has a problem: the rates are all over the place. The numbers do not correspond to the currencies.

Many thanks coothead.

4

No that is a very silly thought. :confused:

They are just deferred until the page has
fully loaded, as per your javascript…

    window.onload = init;

coothead

5

I’m not that silly… the 3 dots made it a joke!

Did you look at the rates?

6

Yes I did. :sunglasses:

Here are a few of sightings…

1 Euro - 51.54 Dominican Peso
1 British Pound - 1.35 Euro
1 United States Dollar - 5628.75 Paraguayan Guarani

coothead

7

Hi

The numbers in the new script that goes at the bottom of the html don’t seem to correspond to the new list of currencies. I’ve adapted the html files using the old list, but you said that that will not work with -php

8

Hi there qim,

you can see the Yahoo rates here…

yql.zip (2.5 KB)

You can decipher the countries here…

ISO 4217 Currency Codes

I will let you do the maths though. :ok:

coothead

9

I am not talking about the rates. It is the script to be put at the bottom of the page

Look at the index.html. At the bottom you picked up

  document.getElementById('cur0').options[2].setAttribute('selected','selected');
   document.getElementById('cur1').options[28].setAttribute('selected','selected');

That does not agree with the list of currencies above and the conversions end up not being correct.

10

Hi there qim,

arrays start at zero, so options[2] is,

<option value="25">British Pound</option>

…and options[28] is,

 <option value="21">Dominican Peso</option>

I would assume that you are confusing the option’s array
position with the option’s actuall value. :ng:

coothead

11

I’ll look at it again

When I used your code “raw” as you gave me the currency pair was not what it should be.

12

What should it be?

coothead

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.