自动嵌入图片网址的JavaScript可以运行，但出现W3错误

Question

I now where my errors are, I just don't know enough about javascript know where it needs to go, can anyone help me. I finally got this all working to auto embed media and images on my site (phpbb forum), and it works good, but the image embed isn't correct (even though it does work).

Here's my errors from W3:

required attribute "src" not specified

required attribute "alt" not specified

document type does not allow element "img" here

end tag for "img" omitted, but OMITTAG NO was specified

So obviously I did a number on the code, but somehow it's managing to function.

Here's my hack job of a code, can anyone help me clean this mess? (I'm just a newbie, this was the best I could come up with after hours and hours);

<script type="text/javascript"> 

(function ($) {
    $(document).ready(function () {
        $(".content1 .postlink").oembed(null, {embedMethod: "append", maxWidth: 300,});
    });
})(jQuery);

$(document).ready(function () {
    var href = $('a.postlink.img-link').get(0).href;
    $('a.postlink.img-link').html($('').attr('src', href).fadeIn(1000));
    $('a.postlink.img-link').colorbox({rel: 'img-link'});
})
 </script>

Answer 1

Your code could use some tidying up, but we would need to see the relevant HTML to really help you tidy it up.

You probably want to change

$('a.postlink.img-link').html($('').attr('src', href).fadeIn(1000));

to

$('a.postlink.img-link img').attr('src', href)

as a start.

However, to answer your main question about the W3 validator, looks at the page before any javascript has run. So I am assuming that you have <img> tags with no src attribute (looks like this is getting set by the javascript). These are the sort of errors that the validator is complaining about.

A HTML page should really 'work' correctly even if javascript is disabled. Even if this just means showing placeholder content or a message saying that javascript is required.

To fix the validation errors, add src and alt attributes to the img tags in your html, point them at some sort of placeholder images and text that is representative of the actual content that will be replaced by your JS.

This should also help in the visual rendering of your page.

Answer 2

This fixed it.

<script type="text/javascript"> //<![CDATA[
    // [your script here]
// ]]></script>