Question

我找到了许多与我的问题相关的解决方案，但似乎没有解决我的问题。

首先让我清楚一下我的问题。我在页面上有很多项目;可以在此页面中显示的产品项目。

因此，对于页面上的每个项目，我都有一个从另一页获得的图像源。

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

这只是一个图片标记，显示产品的整个代码如下所示

 $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;

现在根据解决方案，我在实际图像标签之前添加了一个图像标记。我尝试过这样的事情

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.

我如何实现我的解决方案，我已经尝试了几个小时。如果您需要更多信息，请告诉我。我会更新我的问题。谢谢！

Answer 1

我找不到自己的修复程序，但我在stackoverflow上找到了this one，这对我来说似乎很好。

如果已设置src，则事件将在缓存中触发 case，在你甚至得到事件处理程序绑定之前。为了解决这个问题，你可以循环检查并基于关闭触发事件 .complete，像这样：

如果发生变化，请从源代码进行复制：

// ".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();
});

显示GIF直到图像完全加载

1 个答案: