Simple Fast Image Loading With Javascript

In this video we'll be learning how to load large images in the background using Javascript. It'll make our page load times much faster and we'll be able to blur the image into focus once we've downloaded it, all without the user noticing.

We'll be using CSS3 transitions and filters for the blurring and animations.

Don't forget to subscribe for more!

[TheLawind]

Not what i have been looking for but really interesting approach. Might be handy in the future

[RyanDobbs]

Dude, nice. Appreciate good, concise info like this. Thanks!

[kawaldeepsingh]

what to do, when we have more than 50 images in our website.

[rushibhimani]

how to do if images are in background? I mean if images are linked as "background-image: src();" in css. Then how to change image?

[sheikabdullah]

thank you for this video man, very interesting.

[murethibrian]

How can i implement the same with php when the images are loading from the database?

[alfahrisama]

can i do this with css instead? does css has something similar to this function?

[richardgenck]

How do you do this with a background image? I have it assigned to the "header" element, do I need to undo that?

[Tornado_]

doesn't load bigImage for me? any help?

[karstenberlin]

excellent - cool and easy and something I didn't think of :-)

[arifulislamify]

how could i use this for multiple image in same page?

[HappyAnimalsD]

This is the 2nd time I am asking this question and apprecia if someone could help me. I want to use the same technique not on a single image but on 4 images reside in my wow slider show. Since all the 4 images take a bit longer to load as they are full screen images, I think it would be a good idea to use above technique instead of an extra loading screen animation I have put in place for now. I think of javascript or jquery array and loop through that array. It sounds very simple but I am not getting to an initial code structure to implement this using above howCode tecnnique. Can someone help please?

[technicalsapkota]

Hello.... Bro.... Please help me I want my registration form to be dynamic. I want to add date of birth country, State First name last name is the field. Although i have design the skeleten with html but i could not store in database plese help.

[ouche]

Hey, from soon have new programing languages -Tenzorflow! Can you make a tutorial about this language?

[dapolcio]

It is more correct to use a listener than call method load on object directly.

[vaibhav]

Appreciate it, Cool and easy hack !! :)

[abhishekva]

Create video on google pay integration

[robinklein]

Thx alot. Thats the best lacy load method i`ve seen so far. With "normal" img picture all works fine! But I have an issue with my art-direction picture set.
<picture>
<source media="print" srcset="img/door-large.jpg 900w">

<source media="(max-width: 480px)"
srcset="img/door-phone.jpg 480w">

<source media="(max-width: 1024px)"
srcset="img/door-pad.jpg 1024w">

<source media="(max-width: 1025px)"
srcset="img/door-large.jpg 1025w">

<img src="img/door-large.jpg"
alt="Beschreibung">
</picture>

If I just leave the code as it is, none of the pictures are loading. If I try to replace srcset with data-lazy only door-large.jpg is loading. Whats wrong here? How can I combine this awesome lazy load method with this picture srcset?

[SubhojeetNeogy]

Blur in respect to the big image download ratio will be much more practical approach, Thanks anyways.

[filippetrovic]

Please do photo uploading with PHP and JCrop. When you upload an image, then you have to resize the photo manually what's really worth it for the social network series. And sure for the profile pages, then you have nice profile pictures and no picture is stretched. :)