I see you now have only 2 CSS errors, this is good. The bad news is you now have 173 HTML errors. Like I said XHTML Basic 1.1 has fewer rules. But even with HTML5, which has the most lenient set of rules, you still have 83 HTML errors.
I recommended XHTML Basic 1.1 because it is the W3C Mobile Initiative’s choice. I did add “if possible”. I write my HTML to the XHTML standard, but sometimes it is not possible or is more trouble than it is worth.
The biggest HTML issue you have is the selector id attribute value. I assume the reason you use an image url as the id is to make it easy for javaScript to get the name of the image. HTML5 is the only doctype that allows the slash character. But additionally, you have a space between [%] and videos. Whitespace is not allowed in an id attribute with any doctype.
An better way to associate values with an id attribute is to use a numerical value. Although HTML5 allows id’s to start with a number, I still would start with a letter to be compliant with all Browsers. I usually start my id’s with an x followed buy the numerical value, or an x- if I want to embed multiple values and split them on the dash.
I associate an object with the id using an array.
Rather than get the id from the event like:
var id = event.target.id;
then get the numeric value from the id
var globalID= parseInt( id.substr(1));
if I wanted two objects associated with one id then I’d use
id=“x-0-1”
then use index=id.split(‘-’); to set values from an array
var pic=new Array();
pic[0][1] = 'image0-1.jpg';
function setSrc(e){
var id = e.target.id;
index=id.split(‘-’);
document.getElementById(id).src = pic[index[1]][index[2]];
img[index[1]].src=img[index[1]][index[2]]
}
But it is easier to pass the id’s numerical value to the function when, on page load, each object is globally stored in a numerically indexed array.
Ex: associate two id’s with their numerical value which relate to another indexed object
![image x0]()
![image x1]()
var img=new Array();
img[0] = document.getElementById('x0'); //declared global on page load
img[1] = document.getElementById('x1');
pic[0] = 'image0.jpg';
pic[1] = 'image1.jpg';
function setSrc(id,n){img[id].src=pic[n];}
Sometimes it is more efficient to use a 2 dimensional array.
var pic[0][1]='image0-1.jpg'
Ex. Sequentially change the image in the mouseover event
![]()
![]()
var img=new Array();
img[0] = document.getElementById('x0'); //declared global on page load
img[1] = document.getElementById('x1');
var pic=new Array();
pic[0][0]='image0-0.jpg'
pic[0][1]='image0-1.jpg'
pic[0][2]='image0-2.jpg'
pic[0][3]='image0-3.jpg'
pic[1][0]='image1-0.jpg'
pic[1][1]='image1-1.jpg'
pic[1][2]='image1-2.jpg'
pic[1][3]='image1-3.jpg'
var nIntervId;
var globalID;
var index = 0;
var max=4;
function mouseOverPic(id){globalID=id;nIntervId=window.setInterval("picTimer",750);}
function mouseOutPic(){clearInterval(nIntervId);}
function picTimer() {
img[globalID].src = pic[globalID][index++];
if (index==max){index=0;}
}
I am very anal when it comes to efficiency and try not to use branch commands (e.g. if else).
I would replace the the "if" with an array value.
var nextPic = new Array(1,2,3,0);
function picTimer() {
var pic[pic].src=img[video][index];
index=nextPic[index];
}
[hr]
[quote="pmeenan, post:8, topic:8450"]
[quote="iSpeedLink.com, post:7, topic:8450"]
You may want to add 7 more sub-domains for your images, e.g img2. - img8.extraxxx
The browser can only load 6 images simultaneously from img1. so you have some serious blocking going on. With 8 you the Browser can load 48 images simultaneously. The Bandwidth is then the bottleneck rather tan blocking.
[/quote]
Don't do this unless you have a very specific and good reason - it's a very good way to cause self-induced packet loss by oversubscribing the client connection. In some cases having an extra shard can be a good idea but having to many will just download all of the resources in parallel but really slowly. You're better off getting things set up so that the images are downloaded with the visible ones first and then letting the others load after (either by order in the html or by explicitly lazy-loading them).
Will Chan (Chrome Networking) has a good write-up on it here: https://insouciant.org/tech/network-congestion-and-web-browsing/
[/quote]
Good point. That was something recommended to do in a W3C Best Practices course. I passed it in without thinking it through. I did preference it with "may" rather than "should".
I can only guess how the Browser programmers implement features. In theory it is conceivably a good way to speed things up. Not knowing about the "Slow Start Congestion" issue I went under the assumption the Browser programmers would figure out how to make it work. The problem is that there are too many entities that do not play well with others (e.g. Microsoft, Apple). That said there should be a much better solution to fixing all the current inherent page load delays.
I was impressed with William Chan's article. He thought it through for me. Nice to know there is someone out there trying to solve these issues.
In the waterfall chart it is so typical to see a lot of TTFB green and very little Transmission blue. The page under test in this forum topic accentuates the problem. Even though his server is rather slow (under 200KB/sec) the green to blue ratio is still very large.
I now wonder if CSS Sprites would help? I would like to see the IETF come up with a protocol making it easy to combine multiple page HTTP elements in to a single connection and eliminate the subsequent Connection and TTFB If they started today they might have something workable in ten years.