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. Note: Library used in tests: https://github.com/brcontainer/smooth-images-js

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> (i.e. 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 https://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>