Preload images

Status
Niet open voor verdere reacties.
L

lerrie

Gebruiker
Lid geworden
2 nov 2010
Berichten
300
Ik ben bezig om mijn codes een beetje op te schonen, en kwam er achter dat de preload functie van dreamweaver nog al slecht geschreven is. Ik weet niet of dit negatieve effecten heeft? Maar volgens W3C Markup Validation Service zitten er fouten in. Dit is de functie die ik gebruik:

[JS]<script>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
</script>

<body onload="MM_preloadImages(..................................)">

[/JS]

Ik heb een beetje gezocht op alternatieven via google maar werd daar niet echt wijzer door. Heeft er iemand hier ervaring mee?
 
Hoi lerrie,
De eerste fout die de html-validator aangeeft, is: required attribute "type" not specified. Bij een <script> moet de browser weten wat voor script het dan wel is, en in welke notatie dat script is opgeschreven. Dat gaat met de type-eigenschap: <script type="...">...</script>. Bij javascript is het altijd: type="text/javascript".

De andere drie fouten hebben ermee te maken dat als een javascript in de html is opgenomen (en niet als separaat .js bestand), er geen tekens in gebruikt mogen worden die in de html-code een speciale betekenis hebben; zoals met name een < en een </.
Om hieraan te ontsnappen, moet aangegeven worden dat binnen het script geen html komt, maar gegevens die als karakters zonder html-betekenis geïnterpreteerd moeten worden: character-data. Het begin en het eind daarvan moet met een speciale code aangegeven worden: // <![CDATA[ respectievelijk // ]]>.
De commentaar-slashes // kunnen hierbij voor moderne browsers ook gemist worden; maar baat het niet dan schaadt het niet.

Als met al wordt het script in de html dan:
HTML: 
<script type="text/javascript">
// <![CDATA[
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// ]]>
</script>
En daar heeft de html-validator geen bezwaar tegen.

Geheel los hiervan: de functie MM_preloadImages() wordt er vaak in gezet (door Dreamweaver, die heeft daar een handje van) om images te preloaden die later bij een mouseover-script gebruikt worden.

Maar dat kan eigenlijk veel beter met een css-sprite (dubbel of meervoudig image, met zowel de normale stand als de hover-stand van een knop of serie knoppen). Dit wordt er als background-image in gezet. Met a:hover, a:focus {background-position: ...} wordt dan het juiste gedeelte van het img op z'n plaats geschoven. Dit scheelt al die src="...", onmouseover="..." en onmouseout="..." eigenschappen in de html en is niet javascript-afhankelijk.
En omdat het plaatje inclusief z'n hover-variant al gedownload is bij het tonen van de normale stand, is er helemaal geen preload meer nodig. :)

Met vriendelijke groet,
CSShunter
 
Hoi lerrie,
Als ik de html-validator bekijk zie ik wat jij ook ziet: het staat er al bij wat je moet doen om het in orde te krijgen. :)

Twee keer: required attribute "alt" not specified (= verplichte eigenschap "alt" niet aangegeven), in regel 145 en regel 196.
Met als uitleg: the "alt" attribute is required for the "img" element.

Dus in de <img>-tag van die regels even <img ... alt="" /> opnemen, dan is het in orde. Tussen de aanhalingstekens hoeft niets te staan, want een lege alt is ook een alt: daarmee is aan de verplichtingen voldaan!

Met vriendelijke groet,
CSShunter

PS de nr.#3 vraag had ik al bekeken: weet ik niet. :rolleyes: Hopelijk iemand anders.
 
Laatst bewerkt:
Ik heb nog eens gekeken naar andere mogelijkheden voor preload images maar kom nog niet zo veel verder. Die standaard js preload van dreamweaver is dus niet goed?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan