Jquery how to cause action after image src is changed and loaded

 
So I have a script that changes the main image src when a thumbnail is clicked on. This is all good and well, except that occasionally the image doesn't load immediately when it is clicked on.
Essentially how do I know when the new image is loaded from the src change.
Here is the line of code I have that changes the source:

$thumbnail_image_src = $(this).find('.thumbnail-image').attr("data-full");
Bind a handler to the 'load' event for the img tag (this JSFiddle)
 $(this).find('.thumbnail-image').each(function() {
   $(this).load(function() {
     alert('image has changed and loaded');
   })
   .error(function() {
     alert('image has failed to load');
   }).attr('src', $(this).attr('data-full'));
 });
These functions will fire at the appropriate events. Enjoy!




http://stackoverflow.com/questions/7088065/jquery-how-to-cause-action-after-image-src-is-changed-and-loaded

Comments

Post a Comment

Popular posts from this blog

Category Name with Products in Cart Page Magento

Modify Your Cart.phtml <div class="cart">     <div class="page-title title-buttons">         <h1><?php echo $this->__('Shopping Cart') ?></h1>         <?php if(!$this->hasError()): ?>         <ul class="checkout-types">         <?php foreach ($this->getMethods('top_methods') as $method): ?>             <?php if ($methodHtml = $this->getMethodHtml($method)): ?>             <li><?php echo $methodHtml; ?></li>             <?php endif; ?>         <?php endforeach; ?>         </ul>         <?php endif; ?>     </div>     <?php echo $this->getMessagesBlock()->getGroupedHtml() ?>   ...
Read more

Safe name of a file by php

 function filename_safe($filename) {     $temp = $filename;      // Lower case     $temp = strtolower($temp);         // Replace spaces with a "_"     $temp = str_replace(" ", "_", $temp);         // Loop through string     $result = "";     for ($i=0; $i<strlen($temp); $i++) {     if (preg_match("([0-9]|[a-z]|_)", $temp[$i])) {     $result = $result . $temp[$i];     }     }     // Return filename     return $result;     }         function safe_filename ($filename) {     $search = array(     // Definition of German Umlauts START     "/ß/",     "/ä/","/Ä/",     "/ö/","/Ö/",     "/ü/","/Ü/",     // Definition of German Umlauts ENDE     "([^[:alnum:]_])" // Disallow: Not alphanumeric...
Read more

Sort Products by popularity count in Magento

Advance shorting option for category/list page in magento Note: Please Make  folder structure app/code/local  and place all files in same structure in this folder ,If you make changes in core files its your risk.please make proper backup for core files if you modify that . Step -1. For Advance shorting option you have to create new collection by overriding Collection class. Overrride the collection class(/app/code/core/Mage/Catalog/Model/Resource/Product/collection.php and create a new function <?php   public function sortByReview ( $dir ){ $table = $this -> getTable ( 'review/review' ); $entity_code_id = Mage :: getModel ( 'review/review' ) -> getEntityIdByCode (Mage_Rating_Model_Rating :: ENTITY_PRODUCT_CODE );    $cond = $this -> getConnection () -> quoteInto ( 't2.entity_pk_value = e.entity_id and ' , '' ) . $this -> getConnection () -> quoteInto ( 't2.entity_id = ? ' , $entity_code_id );    $this -...
Read more