Images or not displayed on first time page load

shivenigma commented 8 years ago

I implemented this directive in my ionic app, where the images are not being displayed when I open the page for the first time, When I inspect the console all image requests were sent and images are retrieved, But they're still with visibility:hidden on browser. From the second load of same screen it works fine, what could be the issue?

jvieyra92 commented 8 years ago

Are you using track by $index ? If so remove it and see if it works.

shivenigma commented 8 years ago

@jvieyra92 : Yeah I was using that, but even after removing it the problem persists.

s-yadav commented 8 years ago

can you setup a jsfiddle for it ? or send the html, css and js you have written for it, so I can debug.

shivenigma commented 8 years ago

HTML

<ion-view cache-view="false">
    <ion-nav-title>
        <div class="title header-text ng-binding">
            <i class="icon"><img src="image/popup-icon1.png" class="full_width">
            </i> <span>{{vm.category.category}}</span>
        </div>
    </ion-nav-title>
    <ion-scroll class="compose-scroll">
        <section class="custom-search-screen">
            <div class="row about_row">
                <div class="list list-inset mail_search_box">
                    <form name="searchForm" novalidate ng-submit="searchForm.$valid && vm.search();">
                        <label class="item item-input">
                            <input type="text" placeholder="Search" name="searchTerm" ng-model="vm.searchTerm" required minlength="3" ng-change="vm.reset();">
                            <i class="icon ion-search placeholder-icon"></i>
                        </label>
                        <div ng-show="searchForm.$submitted" class="assertive error-msg text-center"
                             ng-messages="searchForm.searchTerm.$error">
                            <div ng-message="required">Please Enter Anything To Search</div>
                            <div ng-message="minlength">Please Enter Atleast 3 Letters</div>
                        </div>
                    </form>
                </div>
                <div class="img_gridview">
                    <ul angular-grid="vm.images" ag-grid-width="150" ag-gutter-size="5" ag-grid-id="gallery" ag-refresh-on-img-load="true">
                        <li class="grid" ng-repeat="image in vm.images track by $index">
                            <a class="grid-img" ui-sref="app.createText" ng-click="vm.setPicture(image.webformatURL);">
                                <img class="full_width" ng-src="{{image.previewURL}}">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card" ng-if="vm.images.length == 0 && searchForm.$submitted && ref.total == 0">
                    <div class="item item-text-wrap text-center">
                        No Images Found
                    </div>
                </div>
                <!--<div class="card" ng-if="vm.end">
                    <div class="item item-text-wrap text-center">
                        End of the List
                    </div>
                </div>-->
                <ion-infinite-scroll
                        on-infinite="vm.search()"
                        distance="1%"
                        ng-if="!vm.end && searchForm.$valid && searchForm.$submitted">
                </ion-infinite-scroll>
            </div>
        </section>
    </ion-scroll>
</ion-view>

CSS :

.img_gridview { width:100%; display:block; margin:10px 0 20px 0px; }
.img_gridview ul { list-style:none; display:table; }
.img_gridview li { list-style:none; display:inline-block; width: 49.5%; vertical-align:top; }
.img_gridview li:first-child { margin-right: 0.5%; float:left; }
.img_gridview li:last-child { margin-left: 0.5%; float:right; }

Dataset

sorry to throw code at you, But I couldn't setup a working copy you can check on jsfiddle, I tried but got some errors.

s-yadav commented 8 years ago

Can't make out much from this code. A jsfiddle or working demo would have been helpful. Though it seems angulargrid is not able to remove img-loading class and add img-loaded class which is why images are not visible. One possible reason can be image.previewURL is giving empty or not been trusted URL. Try using $sce service of angular (https://docs.angularjs.org/api/ng/service/$sce) and let me know if the problem exists.

shivenigma commented 8 years ago

but even the image loaded class is being applied to the image and its parent li, I can see that through browser console, screenshot attached. screen shot 2016-06-20 at 5 25 53 pm

shivenigma commented 8 years ago

Thanks for both of your help buddies, thanks for your reminder about the $sce service @s-yadav, I created a filter to dynamically mark the image sources as trusted. The image-loaded class is only started to be added after I added the filter. The funny thing why it didn't worked after that was, there are some CSS you gave in documentation I had it removed while doing things to fix the problem after I added it again it works fine. Thanks for your wonderful directive.

jeevasusej commented 7 years ago

Even me too have the same problem.

Can you please post how did you solve? I couldn't understand.

abhith commented 7 years ago

Same problem, image-loaded class is not adding to the image element. @shivenigma please share how you resolved it.

edited my problem is not related to sce, it was exactly #95

shivenigma commented 7 years ago

@jeevasusej @Abhith I am not sure if this is helpful, but it did work for me. But I am sure its worth a shot.

filter (function(){ angular.module('common') .filter('trustUrl', function ($sce) { return function(url) { return $sce.trustAsResourceUrl(url); }; }); })();

template

<img class="grid-img full_width" ng-src="{{picture.thumbnailImage | trustUrl}}">

s-yadav / angulargrid

Images or not displayed on first time page load #69