PDA

View Full Version : Image cross domain



dbottillo
19 Oct 2010, 8:38 AM
Hi to everyone,

i have a doubt about to get images from a back_end

usual for json i do something like:


Ext.util.JSONP.request({
url: pathBE+'/path to json.json',
callbackKey: 'callback',
params: {
limit: 5
},
callback: function(data) {
// do something
}
});


but how can i do this for an image?
in local i do:


Ext.Ajax.request({
url: 'http://my_local_site/80.jpg',
callback: function(response) {
// put image somewhere
}
});


but i can't do this with Ext.util.JSOPN.request, because i can't wrap image in a javascript function
but with Ext.Ajax.request i can't do cross-domain request

any solution?

Thank You

Daniele

jay@moduscreate.com
19 Oct 2010, 8:43 AM
Daniele, you don't use AJAX to request binary data (mages, music, etc). Simply configure an image tag somewhere and set it's src property. When the item is rendered on screen, the browser will request the resource automatically.

jay@moduscreate.com
19 Oct 2010, 8:44 AM
Btw, images can be requested cross domain, however, Ajax does not allow it.

dbottillo
19 Oct 2010, 3:44 PM
Btw, images can be requested cross domain, however, Ajax does not allow it.

and how can i do this?

my target is to put a loading icon in src, and when the image from the server is ready i want to change to this image, because if i put directly the image in src, it's blank until image is full loaded!

evant
19 Oct 2010, 3:52 PM
Well how else will it work? How can the image show unless it's already loaded?

dbottillo
19 Oct 2010, 10:47 PM
Well how else will it work? How can the image show unless it's already loaded?

indeed i don't want to show image unless it's already loaded...i want to show a temporary loading image until image it's loaded...!

evant
19 Oct 2010, 10:53 PM
Ext.onReady(function(){
var el = Ext.getBody().createChild({
tag: 'img'
});
el.on('load', function(){
alert('loaded');
})

el.dom.src = 'http://www.ibiblio.org/wm/paint/auth/durer/large-turf.jpg';
});

dbottillo
20 Oct 2010, 12:23 AM
maybe it's more simple if i put code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {


var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<div><img src="loading.gif" id="image" /></div>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

var panel1 = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});


var panelInit = new Ext.TabPanel({
fullscreen: true,
layout: 'card',
items: [panel1],
listeners: {
afterrender: function(){
Ext.Ajax.request({
url: '158.jpg',
callback: function(response) {
if(response.callback.arguments[1]) document.getElementById('image').src='158.jpg';
}
});
}
}
}).show();
}
});

my problem is that with Ext.Ajax.Request i can't get images extradomain! and i'm trying to understand how to change code to get an image from an external domain

evant
20 Oct 2010, 12:29 AM
As Jay said, you can't do an Ajax request for binary data.

The method I outlined above will work fine.