Open images in the background

Asked

Viewed 171 times

-1

I want to know if it is possible, when loading a web page, the images do not interfere with the loading of the page, that is, when opening the execute page and then read the images, so that the page takes 1 second and not 3, for example.

How can I do such a thing?

php image

2 answers

3


You can use the plugin Lazyload to load the images only when they are in the visible area of the browser screen.

The advantage of this is that there is a performance gain in page loading and also saves internet bandwidth consumption of users, even more when they access your site via 3G or 4G.

Using Lazy Load is simple. Simply add the script to <head> of your page:

<script language="javascript" src="jquery.lazyload.js"></script>

Then add the class .lazy on the images that will be affected:

<img class="lazy" data-original="imagem_real.png" src="imagem_pre.png" />

And call the function in the script:

<script>
$(function(){$("img.lazy").lazyload();});
</script>

Notes:

  • data-original is the path of the final image, which will be loaded when the area it is in is within the visible area of the browser.
  • In src you put the path of a generic image, which will be preloaded before final image (create a lighter image possible, such as a 1x1 pixel png, for example).

Download the plugin and see the documentation in the link https://appelsiini.net/projects/lazyload/

  • This is the comment that most fits what I’m looking for. Thank you

0

Browser other questions tagged php image

You are not signed in. Login or sign up in order to post.