JSFiddle - React, Tailwind, and code Playground

by andrewvergel

HTML

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="http://www.benjalink.com/wp-content/uploads/2011/11/facebook-at-work.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://www.noticiasyfarandula.com/wp-content/plugins/bj-lazy-load/img/placeholder.gif" data-real-type="image" data-real-src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/p206x206/603412_10151199396982848_1649411737_n.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/p206x206/603412_10151199396982848_1649411737_n.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="http://www.google.com/about/datacenters/gallery/images/_2000/IDI_017.jpg"  width="auto" height="auto" />

JavaScript

function check_image_load() {  
    $('[data-image]').each(function(e) { 
        if (is_in_view($(this))){
        $(this).append('<img src="'+$(this).attr('data-image')+'" width="'+$(this).attr('data-imagew')+'" height="'+$(this).attr('data-imageh')+'" />').removeAttr('data-image').hide().fadeIn(2000);
        }  

    });  

    $('[data-real-src]').each(function(e) { 
        if (is_in_view($(this))){
       if($(this).attr('data-real-type')=="image"){
           $(this).attr('src',$(this).attr('data-real-src')).removeAttr('data-real-src').hide().fadeIn(2000);
       }
      }  

    });  
}  
function is_in_view(elem) {  
    var docViewTop = $(window).scrollTop();  
    var docViewBottom = docViewTop + $(window).height();  
    var elemTop = $(elem).offset().top;  
    var elemBottom = elemTop + $(elem).height();  
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}  

$(window).scroll(function() { check_image_load(); });
$(document).ready(function() { check_image_load(); });