In above image please check 1,2,3 cases.
Case 1 - Image is not loaded so here loader is showing.
Case 2 - Image is half loaded so still image loader is showing.
Case 3 - Image is fully loaded so loader is not showing.
Solution -
Hey guys, There are many third-party libraries available for this but when I try those libraries nothing working properly. So I found a solution with the help of CSS. This is very simple and easy to use. In this solution, we will show loader git until the image load in img tag. So now check below details for solution -
First, in your CSS file add below class -
.default-img-loader{
background: url('../assets/img/loader.gif') no-repeat center;
}
This class will add a background image to the image tag. Here we used below property -
url('../assets/img/loader.gif') - Make sure to update path according to your project.
no-repeat - This will not repeat image in background.
center - This will place the image in center.
Now, In your HTML (template) file add “default-img-loader” class in image tag.
Eg-
<img class=“default-img-loader” src=“your image url path of server”>
Note - Gif image size should be 16 × 16 OR 18 × 18 for batter experience. You can download loader from below URL -
Feel free to post a comment if you face any issue during the implementation of this.
This will help in this case when you are fetching images from server and image size is very long. With the help of this solution, you can show loader until the image fully load. This will work for ionic, HTML, angular, PhoneGap etc. This works for me. I develope ionic app and its working perfect in this.
No comments:
Post a Comment