lazyload Image

JQuery

$(window).bind("load", function(){
 var timeout = setTimeout(function() {
  $('.lazyload1second').each(function(){      
   $(this).attr('src', $(this).attr('original_link')).fadeIn(700);
   $(this).removeAttr('original_link');   
  });
 }, 500);
});

HTML

width="100%"  src="//www.example.com/images/right_banner_loader.jpg" original_link="https://example.blob.core.windows.net/images/offers/website.jpg?v3=3" alt="True Rupees" class="lazyload1second">

Replace Or hide Broken Image

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Display Image Preview Be four Uploading Image.

See Live Demo.

http://stackoverflow.com/a/12369027


HTML

   type='file' onchange="readURL(this);" />
     id="blah" src="#" alt="your image" />

JQuery

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
}