How to set custom CSS for data-src - html

Question

I know that we can set css for a image via id or its class. My images in the site are coded as below
<img class="img-responsive" id="loader" src="{{asset('img/loader.gif')}}" data-src="{{asset('uploads/banner01.jpg')}}" >
Attributes of the images
loader.gif
Width:200px
Height:200px
banner01.jpg
Width:500px
Height:400px
Custom CSS added via loader id
#loader{
width: 200px;
height: 200px;
}
My problem is that when I add this custom CSS it works fine with 200px width and 200px of height but it also explicable to banner01.jpg too.
Means even banner width 500px and height 400px after loading image it shows as a 200px X 200px image.
What I want to know
Is there is a way to add custom css to data-src ?

Answer 1

There is a better solution to load images, videos and contents after page rendered called lazy load.
There is a very simple JQuery plugin to implement that with very few lines of codes.
http://jquery.eisbehr.de/lazy/
There are only 3 steps.
Add CDN or download and link the plugin.
2.Add "lazy" to class attribute of img tag.
EG:
<img class="lazy" data-src="images/1.jpg" />
3.Add this JQuery function.
<script>
$(function() {
$('.lazy').lazy();
});
</script>
To add a gif for loading just change your function to this.
// plugin build-in placeholder management
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
});
});
For a demo check this link.
http://jquery.eisbehr.de/lazy/example_basic-usage

Answer 2

You will try below custom css
img:not([data-src$="loader.gif"]) {
Width:500px
Height:400px
}

Answer 3

I think you should load these two images to two image tags. And put it in the same div.
And put this css id to div.
<div id="loader">
<img class="img-responsive" src="{{asset('img/loader.gif')}}">
<img class="img-responsive" data-src="{{asset('uploads/banner01.jpg')}}" style="width:500px;height:400px">
</div>