images within noscript

Question

Note: My question is not about javascript

Note: My question is how to make the HTML accessible to search engines.

Note: My question is not about hiding texts, is on block loading of images in order to use LazyLoad.

I tested various techniques of blocking the loading of images to use effect LazyLoad (I'm developing in javascript), was the only efficient <NOSCRIPT>:

The HTML structure that would, with LazyLoad loading of images is achieved via the viewport (visible part of web page).

<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <noscript><img src="foto-m0101.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <noscript><img src="foto-m0201.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <noscript><img src="foto-m0301.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>

When noscript with the image is the view-port (visible part of web page).

The jquery-plugin gets the DOM: $("span.lazyload"). The jquery-plugin checks if the <noscript> <img> is on view-port. The jquery-plugin to create a new Image with Image.onload = function(){}. When the image loaded Image.onload will insert <IMG> outside the <noscript>

For clarity. Suppose that only the first <noscript> is the view-port (<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>). After the onload javascript will do the HTML:

<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <img src="foto-m0101.jpg" alt="image description">
                <noscript><img src="foto-m0101.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <noscript><img src="foto-m0201.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
        <span class="lazyload">
                <noscript><img src="foto-m0301.jpg" alt="image description"></noscript>
        </span>
        consectetur adipiscing elit.
</p>

---

[edit] I believe that Google displays the DOM also modified by Javascript. Look I used the tool Fetch as Google

Look at the results:

Without my jquery-plugin and noscript (ie pure HTML):

---

With jquery-plugin and noscript:

note: The javascript that showcased images and manipulated the DOM.

Question:

• This is a bad practice for search engines (I refer to HTML)?

• If it is a bad practice, you could put an example of good practice?

• If there is another question talking about "NOSCRIPT" with "IMAGES", forgive me.

• If the javascript displays images and Fetch as Google displays the content normally (like the browser) so Google indexes the DOM manipulated by javascript?

Note: I did not find any doubts about noscript with images.

Answer 1

I would take a look at this question on SO http://stackoverflow.com/questions/6165643/load-html-then-load-images-using-ajax-in-jquery it has an AJAX lazy load answer and jsfiddle. I would try and avoid using <noscript>