BOTJr. BOTJr. - 1 month ago 5x
Javascript Question

Show GIF until image loads completely

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

while ($obj = $results->fetch_object()) {
$products_item .= <<<EOT
<li class="product">
<form itemscope itemtype="" 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 class="product-content"><h3 itemprop="name" style="margin-top:10px">{$obj->product_name}</h3>
<div class="product-info">
<span itemprop="offers" itemscope itemtype="" >
<i itemprop="priceCurrency" content="INR" class="fa fa-inr"><span itemprop="price">{$productPrice}</span></i>
<span itemprop="weight">{$weight}</span>
<input itemprop="availability" itemtype="" content="Out Of Stock" type="hidden" name="product_qty" value="Sold Out"/>
<label content="{$obj->product_company}" itemprop="manufacturer">
<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>

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 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();