{"id":94,"date":"2015-02-27T12:39:04","date_gmt":"2015-02-27T07:09:04","guid":{"rendered":"http:\/\/subashselvaraj.com\/?p=94"},"modified":"2025-06-21T07:40:57","modified_gmt":"2025-06-21T07:40:57","slug":"angularjs-directive-to-show-loader-for-image","status":"publish","type":"post","link":"https:\/\/subashselvaraj.com\/index.php\/2015\/02\/27\/angularjs-directive-to-show-loader-for-image\/","title":{"rendered":"Angularjs directive to show loader for image"},"content":{"rendered":"<p>Here you go for the directive to show loader for images in your angularjs application.<\/p>\n<p>Inject the module &#8220;sesu.imageloader&#8221; in your main app module and start using it. You need to pass the loader image and the css class for your loader which gives more flexibility to customize loader based on your application&#8217;s theme.<br \/>\nUsage:<\/p>\n<pre class=\"brush:html\">`&lt;img actual-src=\"{{url}}\" loader-src=\"http:\/\/preloaders.net\/preloaders\/712\/Floating%20rays.gif\" loader-class=\"preload\" showloader &gt;<\/pre>\n<p>Check the <a title=\"\" href=\"http:\/\/plnkr.co\/edit\/GchZl3B61EgFdI7oR47Z?p=preview\" target=\"\" rel=\"noopener\">plnkr<\/a> to get an idea on using it.`<\/p>\n<p>[iframe src=&#8221;http:\/\/embed.plnkr.co\/GchZl3B61EgFdI7oR47Z\/preview&#8221; width=&#8221;100%&#8221; height=&#8221;480&#8243; allowfullscreen=&#8221;allowfullscreen&#8221; frameborder=&#8221;0&#8243;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here you go for the directive to show loader for images in your angularjs application. Inject the module &#8220;sesu.imageloader&#8221; in your main app module and start using&#8230; <\/p>\n","protected":false},"author":1,"featured_media":225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"_themeisle_gutenberg_block_has_review":false},"categories":[8,22,4,16],"tags":[15,24,23],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/94"}],"collection":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":19,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/94\/revisions\/137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/media\/225"}],"wp:attachment":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}