Load Background Image by checking its existence using AngularJS

Thursday 12 February 2015 | Posted by Sample

First check whether image exists or not then load the image. This type of implementation gives clean UI view to user. In this example, initially we are loading image then assigning as background image if it exists.

Markup

<div id="divID" ng-click="setBackgroundImage($event,'http://lh3.googleusercontent.com/-GRRunt52GXo/AAAAAAAAAAI/AAAAAAAAAH4/Bz2Nf2zrXJk/s512-c/photo.jpg')">
 Sample DIV 1
</div>

Script

$scope.setBackgroundImage = function($event, imgLocation) {
    console.log('setBackgroundImage');
    var bgImg = new Image();
    bgImg.onload = function() {
        var myDiv = $event.target;
        myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
    };
    bgImg.src = imgLocation;
}

Try It Your Self

Labels:AngularJS

5 comments:

Richard C. Lambert31 May 2017 at 22:55
Personally I think overjoyed I discovered the blogs.
I would recommend my profile is important to me, I invite you to discuss this topic...
background check mumbai
ReplyDelete
Replies
Jack son18 December 2017 at 02:55
All things considered, there are a couple of highlights you ought to consider about eCommerce destinations. Above all else, it spares time and work. Product Photography Retouching
ReplyDelete
Replies
Claudia Davis15 August 2018 at 01:48
It is the fundamental background check approach of American Acme Corporation that all new Staff and indicated new Hourly workers have certain accreditations and criminal and other background data confirmed as a state of business.globe news wire
ReplyDelete
Replies
Cheap Assignment Writers17 July 2021 at 04:26
I love it here. Keep sharing your good vibes. I love them Are you also searching for dissertation writing help? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank
ReplyDelete
Replies
Cheap Assignment Writers17 July 2021 at 04:26
Good blog. Keep sharing. I love them Are you also searching for Spanish writing help? we are the best solution for you. We are best known for delivering Spanish writing services to students without having to break the bank
ReplyDelete
Replies