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=\'https://browshot.com/static/images/not-found.png\'" />; 

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) {  
}else{

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:)

Comments

Popular posts from this blog

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 ( http://tutorialopenerp.wordpress.com/2014/04/23/one2one/ ) 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

Odoo: Download Binary File in v10

To download any binary file in Odoo10 following is the link: http://127.0.0.1:8069/web/content?model=<module_name>&field=<field_name>&filename_field=<field_filename>&id=<object_id> module_name    - the name of the model with the Binary field field_name         - the name of the Binary field object_id            - id of the record containing particular file. field_filename    - name of a Char field containing file's name (optional). So if you want to call a function on button click and download the file, code is as follow: file_url = "http://127.0.0.1:8069/web/content?model=<module_name>&field=<field_name>&filename_field=<field_filename>&id=<object_id>" return {     'type': 'ir.actions.act_url',     'url': file_url,     'target': 'new' } In Reports or web page, you can use it as: <t t-foreach="files&qu

Odoo/ OpenERP: Customize one2many relational field

I was working on one2many relational field to integration one functionality. Worked on python code and then wrote an xml file for the same. Restarted my server. It showed me the row with headers and 'Add an item' button. When clicked on that it opened a pop-up to provide inputs. It shows all the fields with in sequence of it's own. Q1. I need input fields in other sequence or don't need all fields. A.   In xml you would have wrote code like this : <field name="dirtyhandsphp" widget="one2many_list" colspan="4" nolabel="1"> <tree string="Details">              <field name="field1" />              <field name="field2" />                      ---------------------------------------------              <field name="designation" />         </tree>                                                     </field> Add form section inside and