Skip to main content

Js/jQuery load alternative images synchronously?

You can find lot of links over Internet, how to load alternative images but most of them give examples of asynchronously loading not synchronously one. I was facing the same problem and it took around 4 hours for me to fix it and now it looks simple :)

Scenario 1(simple):
You have two images and want to show the 2nd one, in case 1st one is not valid.

Use following image tag:

<img src="'+src+'" onError="this.onerror=null;this.src=\'\'" />; 

Note: Please don't forget to add this.onerror=null otherwise browser may stuck in a loop.

Scenario 1(typical):
You have three images:

1. Show image1 if valid otherwise image2.
2. If image2 is also invalid show 3rd one.

In this case we have to use above code as well as one more function for middle image.

Not working
You can use following code in JS and looks like it will work but will not

var src = first_image_src
var image = new Image();
image.src = src;
if (image.complete) {  

src = second_image_src; 

<img src="'+src+'" onError="this.onerror=null;this.src=\'+third_image_sorce+'" />;

It will always show you first(if valid) or 3rd image(if 1st one not valid), not second one although valid one.

Reason: Above JS code makes an ajax GET asynchronous request to check whether the image is valid or not. It will not wait till the response comes due to it's single threaded feature.

Working solution
To solve above problem we have to either make an synchronous request or use asynchronous in such a way the it looks like request is synchronous one. 

Here is the code:

function getSecondImage(element, second_image_src){
    var image = new Image();
    image.src = second_image_src;
    image.onerror = function(){$(element).prop('onError',null)};  
    image.onload = function(){$(element).prop('src',second_image_src)};      

var img_tag = '<img src="'+src+'" onError="this.onerror=getSecondImage(this,\''+second_image_src+'\');this.src=\'+third_image_sorce+'" />';

1. It will first check whether 1st image is proper if it's fine, 1st image will be loaded.
2. If 1st image is not valid, getSecondImage method will be called.
3. getSecondImage method will check if second image is valid or not. If it's valid it will update src of the image and that image will be loaded otherwise returns null.

4. If getSecondImage returns null then third image will be shown.

That's it.

If need any mode clarification or facing issue with above code please come back to me with your valuable comments.

Thanks!!!!!!!! Enjoy Programming:)


Popular posts from this blog

Odoo: Qweb Templates Cache Issue

Hi Everyone, Today I was working on a hotel booking template in Odoo and changes made in the Qweb template(.xml) were not reflecting on updating module with odoo service restart. Tried few times without any success :(. Finally, I decided to delete the old template from Odoo backend and then update module again and it worked like a charm!! :) Steps to delete template from backend: Settings --> User Interface --> Views --> Search by template name Delete the used template. Although it's a small post, but I'm sure it will meet the purpose and help someone in the future. Thanks!!! Enjoy Programming!! :) Reference Links: ===================================

Odoo12/13: Add an extra action in the tree view action button

This post will help you to add an action window in Odoo. Odoo13: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"              binding_model="account.move"              view_mode="form"              target="new"              binding_views="list,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Odoo12: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"             view_mode="tree,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Thanks!!! Enjoy Programming!! :) Reference:

Odoo/OpenERP: one2one relational field example

one2one relational field is deprecated in OpenERP version>5 but you can achieve the same using many2one relational field. You can achieve it in following two ways : 1) using many2one field in both the objects ( ) 2)  using inheritance by deligation You can easily find the first solution with little search over internet so let's start with 2nd solution. Scenario :  I want to create a one2one relation between two objects of openerp hr.employee and hr.employee.medical.details What I should do  i. Add _inherits section in hr_employee class ii. Add field medical_detail_id in hr_employee class class hr_employee(osv.osv):     _name = 'hr.employee'     _inherits = {' hr.employee.medical.details ': "medical_detail_id"}     _inherit = 'hr.employee'         _columns = {              'emp_code':fields.char('Employee Code', si