large images

[Terry Gilliver]

I have some large images which I display on the page. It takes only a short time to load the image, but the problem is during that time, I see the 'No Image' image displayed on the screen.

Is there a way of preventing that?

[Kateryna Grynko]

Hi Terry,

1) Could you please clarify your browser/device/OS version?

2) What is the expected result? What do you want to display while an image is being loaded?

[Terry Gilliver]

The problem occurs in the development ide using chrome on windows 8, It occurs on android 2.3 samsung using firefox.

It is the image that is normally shown if the image name does not exist. In my case, it does exist, but takes a short while to load. This is no a problem in itself, but the fact that the 'No Image' image appears first makes it look bad.

[Kateryna Grynko]

Hi Terry,

Most probably this is how browser works.
Could you please share the app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell its name? We'll check.

[Terry Gilliver]

It is shared. It is called sherakbar vip

you can log on as admin, password ravine

[Kateryna Grynko]

Hi Terry,

This happens because when you open page, the element doesn't have an image path and displays "no image". We recommend that you replace it with animated preloader by default, and then replace it with the needed image changing 'src' attribute.

[Terry Gilliver]

I am not sure what yu mean by 'animated preloader'

[Kateryna Grynko]

Hi Terry,

Sorry, I mean spinner
preshowSpinner();/preandprehideSpinner();/pre

[Terry Gilliver]

I've tried the following in my page show event:

preshowSpinner({text: 'Loading menu ...', textVisible:true, theme: 'd'} );

// Get Category
var category = stringClean(Apperyio.storage.sitDownCategory.get());

//Change Page Title
Appery('mobileheader').text(category);

//Image name
var image = category.toLowerCase() + '.png';
image = image.replace(/ /g, '_');
console.log(image);

//image path
var imagePath = Appery.getImagePath(image);
console.log(imagePath);

//load image
Apperyio('menu_image').attr('src',imagePath);

hideSpinner();/pre

It doesn't appear to have any effect.

[Terry Gilliver]

OK. I found a suitable work-around. I have created an an image which is just a background colour, the same as the image to be loaded. I then use this as the default image. This looks more professional and I think quite acceptable.