Deffering all images after page load problem

[perfumbg]

Hello,
I have onClick ajax callback function for my cart

function showview(c){var b="#"+c;jQuery(b).show()}function hideview(c){var b="#"+c;jQuery(b).hide()}function closecart(){jQuery("#carttopcontainer").fadeOut(400)}function startHover(){jQuery("#carttopcontainer").fadeIn(600)}function endHover(){jQuery("#carttopcontainer").fadeOut(600)}function ajax_cart(){var a="shoppingcart.php";jQuery("#carttopcontainer").load(a),jQuery("html, body").animate({scrollTop:0},"slow"),jQuery("#carttopcontainer").fadeIn(400),jQuery("#carttopcontainer").delay(<?php echo ZX_AJAX_CART_FADE_DELAY; ?>).animate({height:"hide",opacity:"hide"},200).mouseover(function(){jQuery(this).stop(!0,!1).animate({opacity:1},200)}).mouseleave(function(){jQuery(this).animate({height:"hide",opacity:"hide"},200)})}function add_prod(a){jQuery.ajax({type:"POST",url:"add_prod.php",data:"products_id="+a,success:function(b){"success"==b.status?(jQuery("#cartBoxListWrapper2").html(b.cart),jQuery("#topcartinner").html(b.cart_top),jQuery("#bottomfinaltotal2").html(b.total)):"error"==b.status},dataType:"json"})}function showRequest(c,b,a){var d=jQuery.param(c);document.getElementById("loadBar").innerHTML='<?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'bar-loading.gif', 'Loading...'); ?>';return true}function strpos(b,c,d){var a=(b+"").indexOf(c,(d||0));return a===-1?false:a}function showResponse(a,b){var c=strpos(a,"Warning",5);if(c>0){document.getElementById("loadBar").innerHTML="";document.getElementById("button_cart").innerHTML='<br /><?php echo TEXT_AJAX_CART_ERROR_NOT_ADDED; ?>'}else{document.getElementById("loadBar").innerHTML="";ajax_cart()}}$(document).ready(function(){var a={target:"#topcartinner",url:"add_to_cart.php",type:"POST",beforeSubmit:showRequest,success:showResponse};$("#cart_quantity").submit(function(){$(this).ajaxSubmit(a);return false})});

and the code for deffering images is:

function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

I altered the html_output.php line

src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '" 

with

data-src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '" src="" 

This method is described here https://varvy.com/pagespeed/defer-images.html

the problem is when a product is added to the cart and when somebody clicks on the cart button,
in my case there is a window that apears with the products image missing that are currently in the cart.

I think the problem is because ajax can handle only one callbac at a time, and i know that tere is a method using promise but how exactly is a mistery for me :)

any help is wellcomed.

[kobra]

Why are you wanting to defer images??

Maybe a link to your site to allow us to see what the issue may be