Slow loading of slides shows content wrong

This is the place to report bugs and get support. When posting in this forum, please always provide as much detail as possible.

Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum, do not report it as a bug.

This is the place to report bugs and get support

When posting in this forum, please try to provide as many relevant details as possible. Particularly the following:

  • What operating system were you running when the bug appeared?
  • What database platform is your site using?
  • What version of mojoPortal are you running?
  • What version of .NET do you use?
  • What steps are necessary to reproduce the issue? Compare expected results vs actual results.
Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum.
This thread is closed to new posts. You must sign in to post in the forums.
5/6/2010 5:09:56 AM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Slow loading of slides shows content wrong

Hi

We have a site running with different topbanners doing fade-slides and being placed in the Alternate panel.

When you load a page for the first time it takes a while before the script code starts sliding the content. This gives an awfull page where the user can see all e.g. 4 pictures beneath each other before the script file starts doing it's job.

Typical it happens when you go to our home page or use a direct link. When you click further on the site it's not a problem as the script code seem to be loaded and ready now. You can try yourself on our page with this link http://www.nysport.dk/alle-sportsgrene.aspx.

Is there a way to make the script file load earlier or to blank the content before sliding?

We typically use code like this in the Alternate panel:

<div>
<img alt="" src="/path-to-picture1 ..." style="width: 1000px; height: 150px" /></div>
<div>
<img alt="" src="/path-to-picture2 ..." style="width: 1000px; height: 150px" /></div>
<div>
<img alt="" src="/path-to-picture3 ..." style="width: 1000px; height: 150px" /></div>
<div>
<img alt="" src="/path-to-picture4 ..." style="width: 1000px; height: 150px" /></div>

Best regards
Lars
 

5/6/2010 3:04:53 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Slow loading of slides shows content wrong

Hi Lars,

The problem is your home page is too heavy, it has a lot images on it and they are not even size optimized for the web, you have specified height and width on them to scale them but that does not change the file size. For a first time visitor the total size of all content is over 800kb on the first request and then the images get cached that is why it seems better after you go to a few pages. So the javascript can't run until all of that is loaded on the first visit.

Hope it helps,

Joe

5/6/2010 4:42:14 PM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Re: Slow loading of slides shows content wrong

Hi Joe!

Thanks for your quick reply. I do get your point about optimizing the total size of what is loaded. Actually I already thought we had optimized our pictures as these go in sizes from 25-80kb.

But anyway, what is your recommended size for the total load of our pages that we should aim to get down to?

And the other question: Do you see any way to somehow "blank" the topbanner until the java script sets in?

Thanks a lot - we are very pleased with MojoPortal and are using it for a handfull different sites within sport.

Best regards

Lars

5/11/2010 2:12:05 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Slow loading of slides shows content wrong

Hi Lars,

I'm not sure about a size threshold to solve the problem, part of the problem is the files are not optimized. Ideally you could solve this by editing them in Photoshop, set the image size as you want it so you don't have to make it smaller using html attributes for height and width on the images. Then if you also have Image Ready, you can do Save For Web from Photoshop and Image Ready will help you optimize the files and this shouold reduce the size some.

But the problem is not only size but also the number of images, each of which requires a separate web request so you have over 50 files that have to be loaded before any javascript can run.

You might consider combining those 50 or so images into 1 image and use CSS Sprites to show them like as a background image on the links or a span inside the links (instead of <img src=...). Reducing all those separate image requests into 1 request would help a lot I think.

Hope it helps,

Joe

5/12/2010 10:39:05 AM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Re: Slow loading of slides shows content wrong

Hi

Googling I found some code to make one div that is visible from start and then a javascript to hide this div and change to the wanted div (=alt content). The theory is that this javascript loads at same time as the slideshow javascript is ready.

I haven't tried this yet, but will try to make it work in the layout master.

Plus of course as you suggest try to minimize content size, but we are using many different pages with a lot of content ....

Thanks so far

Lars

5/12/2010 3:13:45 PM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Re: Slow loading of slides shows content wrong

YES, that worked in first shot!!

If anyone can  benefit from this approach .... here is the code in the Layout.master:

<asp:Panel ID="divAltLoad" runat="server" CssClass="altcontent1" >
<div>...
</div>
</asp:Panel>
<asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1" Style="display: none;" >
<asp:ContentPlaceHolder ID="altContent1" runat="server" >
</asp:ContentPlaceHolder>
</asp:Panel>

.. and in the script tags:

function pageLoad(sender, args)
{
TogglePannel('<%= divAlt1.ClientID %>', true);
TogglePannel('<%= divAltLoad.ClientID %>', false);
}

function TogglePannel(target, OnOff) {
obj = document.getElementById(target);
if (obj)
{
obj.style.display = (OnOff) ? 'inline' : 'none';
}
}

If you look closely in the left corner of the topbanner you will see the three dots before the sliding topbanners are loaded and start fading. Link: http://www.nysport.dk/alle-sportsgrene.aspx

I believe that can be used for other slow loading panels and divs as well.

.. so that was a pretty simple wink

 

Best regards

Lars

You must sign in to post in the forums. This thread is closed to new posts.