Show GIF until image loads completely

Question

I found many solutions related to my problem but no seems to solve my problem.

Let me first clear my question properly.I have many items on a page;product items that can be shown in this page.

So for every item on the page , i have an image source which is obtained from the other page.

<img itemprop="image" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" >

This is just one image tag,the whole code that displays a product looks like this

 $imgID=0;
  while ($obj = $results->fetch_object()) {
    $productPrice=($obj->price);
    $weight=$obj->amount;
    $weight=str_replace('kg',"",$weight);
    $products_item .= <<<EOT
    <li class="product">
    <form itemscope itemtype="https://schema.org/Product"  class="get_method_product_forms" action="/landing_cake/" method="get">

    <div style="position: relative" class="product-thumb">
    <div  class="box">
    <img  src="/cart/images/loader.gif" id="{$imgID}">
    <img itemprop="image" class="loaderGIF" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" ><img  id="overlay" src="/cart/images/soldOut.png"><div class="overbox">

    <div class="title overtext"></div>
    <div class="tagline overtext"><p style="font-size:20px;">
    <span id="fon"></span><button id="{$obj->product_code}" class="wishlist" >&#9829;</button>
     </div>
  </div>
</div></div>
    <div  class="product-content"><h3 itemprop="name" style="margin-top:10px">{$obj->product_name}</h3>
    <div class="product-info">
    <span itemprop="offers" itemscope itemtype="https://schema.org/Offer" >
    <i itemprop="priceCurrency" content="INR" class="fa fa-inr"><span itemprop="price">{$productPrice}</span></i>
    <span itemprop="weight">{$weight}</span>
     <input itemprop="availability"  itemtype="https://schema.org/OutOfStock" content="Out Of Stock" type="hidden" name="product_qty" value="Sold Out"/>
    </span>
    <fieldset>
    <label content="{$obj->product_company}" itemprop="manufacturer">
    {$obj->product_company}
    </label>
    </fieldset>
    <input itemprop="productID" content="{$obj->product_code}" type="hidden" name="product_code" value="{$obj->product_code}" />


   <div align="center"><button id="{$obj->product_code}" style="background:#666666" value="{$obj->product_code}"  type="submit" class="SoldOut" >Add to Cart</div>

    </div>
    </div>
    </form>
    </li>
EOT;
 $imgID++;
            } 
echo $products_item;

Now based on the solutions, i added an image tag just before the actual image tag.I tried doing something like this

1.   $('.loaderGIF').on('load',function(e){//something})
    //This didn't even run

 2.   $('img').on('load',function(e){//something})
    //I can't seem to limit this to the main image.

How do i achieve my solution, i have been trying it out for a couple of hours. Please, let me know if you need somthing more.I will update my question.Thanks!

I had been stuck on this myself for quite a while and it was troublesome to say the least, but I did fix it in the end. However, one question I have: Does it have to be dynamic? If you were to append the `img` with jquery, you could use the `.done()` function to remove the loader afterwards. Anyway, I'll see if I can find my old code to fix this in the meantime — NoobishPro, Sep 03 '16 at 12:21
Yes, images are generated by the other page. Cause the size of the display item is something different than the original pics.So i have to change their dimensions first , in order to properly display them here.Yeah, sure i will wait. — BOTJr., Sep 03 '16 at 12:23
Sorry, the website got replaced and my old code of that fix is gone. Did you know of this plugin?: https://github.com/desandro/imagesloaded -- would you mind using a plugin like that? The reason I'm recommending this plugin is because apparently, since browser-caching is a big thing, things like `.load()` tend not to work on cached images :) this plugin supposedly solves that. — NoobishPro, Sep 03 '16 at 12:26
i have not read this plugin yet but if this solves my purpose i would not mind using a plugin. — BOTJr., Sep 03 '16 at 12:29
I would recommend you try, and let us know whether it worked or not. If it did, I'll put it in an answer and you can accept it so people know the case has been solved. If not, then you'll obviously need other people to answer it because for now, I'm at the end of my wits ^^ — NoobishPro, Sep 03 '16 at 12:31
hehe , sure .I will give it a try.I will let you know , if it worked or not.Thanks. @Babydead — BOTJr., Sep 03 '16 at 12:32
@Babydead i saw it's code, it works on the fact that it runs a loop in the js and then adds an img src from there and that's what my whole point is , i cannot possibly provide the src from there cause my self generated image would have loaded by that time,till the time i run that loop and decides what to do. — BOTJr., Sep 03 '16 at 12:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122572/discussion-between-botjr-and-babydead). — BOTJr., Sep 03 '16 at 13:25

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

I couldn't find my own fix, but I found this one right here on stackoverflow and it seems good to me.

If the src is already set, then the event is firing in the cached case, before you even get the event handler bound. To fix this, you can loop through checking and triggering the event based off .complete, like this:

Copy from the source in case it changes:

// ".one()" makes it work only once. Change to "on" if you need it to happen more.
$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

edited May 23 '17 at 12:08

Community

1
1

answered Sep 03 '16 at 12:45

NoobishPro

2,354
1
10
19

but this image selector would take every image on the page in account as well? wouldn't it? – BOTJr. Sep 03 '16 at 12:52
I'm a bit closer to my solution with your help,let me once do that,i will edit your answer and will mark it as correct^^ – BOTJr. Sep 03 '16 at 12:56
I'm sorry, I got busy. Yes, the image selector will take every image on the page. If you don't want that, add the image wrapper to the selector like so `$('.container img')`. Good luck! – NoobishPro Sep 03 '16 at 17:15

Show GIF until image loads completely

1 Answers1