PictureBoxes/Images render/load slowly and only when viewed

[Jan Meinken]

Hello,

in our web application we use the HTML5 report viewer and we created a report (.NET type report in C#) with a list. For every list item we display an image based on the value of an status field of that list item.
For that we have four picture boxes that have the exact same location. With conditional formating we change the visibility based on the status field.
We have three questions about that:

1) Another possibility is to design only one picture box and change the background based on the status field. But if we do so we don´t have the sizing property so we need to use an image that is small enough to fit our needs.
But when we use a small image it gets blurred when zooming in. Is it possible to get it done like that (with only one picture box) with a bigger image and sizing it?

2) The above-mentioned images are displayed on the second page of the report. When the first report page gets rendered it only loads the content and images of the first page. 
If we go to page 2 it starts downloading the other images so the images appear after a delay. 
Is it possible to change it in a way that the images get loaded immediately after the first page finished rendering respectively after the report has finished loading 
and before we navigate to the second page? So in the time the user is viewing the first page the content of the other pages is already getting loaded in the background. 

3) Some of our images on page 2 are loaded "immediately" and some appear delayed one after another. We checked the network tab in Chrome console.
It says that some of them have a big "Waiting (TTFB)" time. It looks like this waiting time increases by about 500ms for every image that has this waiting time. See figure (green bar is "Waiting (TTFB)", blue is "Content Download").
Can you tell us where this waiting time could come from?

Thank you in advance!

[Katia]

Hi Jan,

In regards to your questions:

1. If the item is hidden with conditional formatting it will not prevent the reporting engine from processing those items. This behavior is required to process hidden items in order for other features of the report, such as Actions, to be working correctly - Performance Considerations.

PictureBox's Value and Sizing properties can be set dynamically by using expressions and adding a binding to PictureBox Bindings collection.
You can also use a user function to set the value of the PictureBox - PictureBox Data Binding.

2. If the report is viewed in Print preview the resources the report uses will be requested for the page. One option is to view the report in Interactive view which will allow loading of the resources at once.
You can also set the ReportSharingTimeout property of the Reporting REST service to a value greater that 0. This will allow the already loaded resources to be reused from the service's cache - Cache Management.

3. You can consider enabling caching as described in the point 2. To be able to provide you more accurate suggestions we would need to check the report definition and the project settings you are using. You can send them in a support ticket from your Telerik account.


Regards,
Katia
Telerik by Progress

[Jan Meinken]

Hi Katia,

thank you for your reply.

1) Using a user function to conditionally set the picture box value works fine for us.

2) Viewing the report in interactive mode doesn´t load all the resources at once. It still loads only the resources for the shown page(s). For instance we have a title page and a page break after it. In this case only the resources for the title page get loaded immediately.
Setting the ReportSharingTimeout works only as long as we stay logged in so this is not really an option to improve our solution regarding our problem.

3) We found out that the problem comes from our server and our authentication.

 

Thank you and best regards 

Jan

[Katia]

Hello Jan,

I am glad to hear that some of the issues were resolved.

In regards to the second issue with image loading, this behavior is not controlled by us, it will depend on the browser. Whenever browser sees <img> tag it loads the associated image from specified src asynchronously. Each image tag is separate asych request to server.

There is a number of technics to preload the images using JavaScript or CSS. Custom JS and CSS can be added to the page with the viewer as well or linked as external files. Check the following resources offering possible solutions:

• 3 Ways to Preload Images with CSS, JavaScript, or Ajax
• Preloading images with jQuery
• So, You Want To Pre-Load, Huh?

Regards,
Katia
Telerik by Progress