PDA

View Full Version : Iframe slows my webpage



shahjee99
03-21-2007, 11:50 AM
Dear,
I make a site for my client i paste three iframes in it which two is randomly changed contents and one is static, my problem is that everything going ok but when my page loaded it become hang for some time no browser scroll and make very stange and when it loaded i scroll the page it become slow scrolling and also i use shadow gradient for shadow it also make slow my navigation whe i mouse over links fast i feel and also you feel it becomes slow please help me this is url where is my page

http://wkgb.110mb.com/index.html

mburt
03-21-2007, 01:00 PM
The message scrolls slow when you scroll with a browser, because the page is being moved up and down, and if it wasn't slowed down it would probably skip. This is a browser function, nothing else. It's not a part of your script that is the problem.

shahjee99
03-21-2007, 01:04 PM
Dear,
I can't understand your answer, actually my problem is not message scrolling, my problem is page scrolling slow and some time hard to scroll it is the basic problem thanx in advance and please help me

mburt
03-21-2007, 01:20 PM
Hmm... The page scrolls fine for me.
What browser are you using?

shahjee99
03-22-2007, 10:13 AM
Dear,
I use internet explorer 6.0 please tell me also browser scrolling and also when the shadow gradient load, i mouseove the links the speed also slow pointer of mouse look very slow work please help help help thanx in advance

Sparaker
03-22-2007, 10:32 AM
You're right the hovers on the text links and scrolling is a bit slower then normal. I will look into the code and let you know if i find something wrong. And just so you know your webpage opens totally unformatted on Mozilla FireFox. :(

Sparaker
03-22-2007, 10:48 AM
From what i have observed .. your using very lengthy css to achieve something which can be achieved pretty easily. First of all make sure you fix the javascript bug on that web page (your missing a semi-column some where). Next try to use

padding:[top padding]px [right padding]px [bottom padding]px [left padding]px;
Instead of placing them individualy like:

padding-top:[top padding]px;
padding-right:[right padding]px;
padding-bottom:[bottom padding]px;
padding-left:[left padding]px;

Also you must realize that whatever css property you define for an upper level element will apply for every element that lies under it, unless that property is overwrited or not supported for that element.

Let me give you an example. You currently have this code in your CSS for elements with class "ddmarkermenu".


.ddmarkermenu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 2px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.ddmarkermenu LI {
PADDING-BOTTOM: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px
}
.ddmarkermenu LI A {
PADDING-RIGHT:0px; DISPLAY: block; PADDING-LEFT: 19px; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: url(images/blue_icon.gif) no-repeat left center; PADDING-BOTTOM: 1px; COLOR: #449805; PADDING-TOP: 0px; BORDER-BOTTOM: #ececec 1px solid; TEXT-DECORATION: none
}
.ddmarkermenu LI A:visited {
COLOR: #449805
}
.ddmarkermenu LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #51b906
}

Could be converted to:


.ddmarkermenu {
padding:0;
margin:0 0 2px;
list-style-type: none;
}
.ddmarkermenu LI {
padding:0 3px 0 3px;
}
.ddmarkermenu LI A {
padding:0 0 1px 19px;
display:block;
text-decoration:none;
font:Tahoma normal bold 10px;
background:url(images/blue_icon.gif) no-repeat left center;
color:#449805;
border-bottom:#ececec 1px solid;
}
.ddmarkermenu LI A:visited {
color:#449805;
}
.ddmarkermenu LI A:hover {
color:#fff;
background-color:#51b906;
}

jscheuer1
03-22-2007, 11:11 AM
Changing the way the css is written (as long as the actual style isn't changed) probably won't have much effect on speed. It certainly will make the code easier to read, at least for most folks.

shahjee99
03-22-2007, 11:54 AM
Dear jscheuer1,
I can't understand your reply, am i right that what i understand from your reply that you say, Sparaker ask me to change css and then it is ok, but you say that it is not for changing the css so please dear you solve my problem a bundel of thanx for you in advance please help me the javascript error is not my error in my page i actually get a ticker from a site it gives me error but it is not problem, problem to me slow navigate and please also tell me how to write right code for both ie and firefox thanx

jscheuer1
03-22-2007, 01:33 PM
Dear jscheuer1,
I can't understand your reply, am i right that what i understand from your reply that you say, Sparaker ask me to change css and then it is ok, but you say that it is not for changing the css so please dear you solve my problem a bundel of thanx for you in advance please help me the javascript error is not my error in my page i actually get a ticker from a site it gives me error but it is not problem, problem to me slow navigate and please also tell me how to write right code for both ie and firefox thanx

Whatever works. I just don't happen to think Sparaker's idea will speed things up much, I may have misunderstood, if so - Great! I am not at this time offering my own solution.

Butterfly
03-22-2007, 07:36 PM
Do you have PHP support? You could use PHP include.

jscheuer1
03-23-2007, 02:34 AM
Well, after actually looking at the link from the first post in this thread, I have these thoughts:


The page doesn't take very long at all to load over broadband cable.

I imagine it could take some time over DSL and especially over dial up.

There is an error report in IE 7 for news.html line 20 char 82 - expected ';'. That most likely refers to the script at tickermyfeed.com

Any page with that much going on (with that much content) will take some time to load.

Have a look at this (somewhat similarly packed full of content) page:

http://www.comcast.net/home.html

It actually takes a little longer to load for me and these people (comcast) are supposed to be pros and supposed to know what they are doing.

Sparaker
03-23-2007, 09:55 AM
I never said that shortening the CSS code will fix your late hovers and everything but i was just suggesting some tweaks you could use to narrow the list we could check on. Your webpage loads up fine its just the text hovers which are really really slow. From what i have observed, if you load your webpage on FireFox and then open the Error Console you'll see that some javascript code is trying to set a value for the attribute "top". This is what i keep getting in the error console: "Warning: Error in parsing value for property 'top'. Declaration dropped.
Source File: http://wkgb.110mb.com/news.html
Line: 0"

It keeps on comming indefinately. Maybe this is slowing down the hovers and other effects on the page. other then this the page loads up fine. And your layout loads a bit different on FireFox. i hope you'll fix that as well. i am going to try to see which javascript code is trying to set the value for "top". I'll keep you posted if i find anything interesting.

jscheuer1
03-23-2007, 02:46 PM
That's a relief, Sparaker. You didn't make it very clear until now that you didn't think the css changes would help load time. I notice that error in FF too and there are several others reported by Opera relating to style width and height as well as the font-style property all in the script from tickermyfeed.com The missing semi-colon reported by IE also comes from that script. The width and height, and probably the problematic top declaration from FF, lack units (should be pixels or some such) and the font-style value is simply invalid, listed as 'normal'. These parsing errors are most likely only a minor (negligible) drag on loading. Removing the DOCTYPE and removing the xml declaration in the <html> tag from the news.html page will fix most of them (and I highly recommend doing so, it may help more than I'm thinking - cannot hurt) and reveals that the error concerning the semi-colon is here:


Error: missing ; before statement
Line: 21, Column: 81
Source Code:

if (window.addEventListener) window.addEventListener("load", loadScroller, false)else if (window.attachEvent) window.attachEvent("onload", loadScroller);else if (document.getElementById) window.onload=loadScroller . . .

But, that cannot be fixed as the script is third party. It can be reported to the script's host.

I'll have another look at things to see if there is anything to this:


late hovers

thing that could be dealt with favorably.

jscheuer1
03-23-2007, 05:13 PM
Well, as promised, I've had an even more in depth look at the page. It's the gradient shadow script that slows the hovers. I'd get rid of it as, I cannot easily see any benefit from it and therefore, most users of the site won't notice it either.