Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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):

http://img845.imageshack.us/img845/2632/webpagethumbnail1.jpg


With jquery-plugin and <noscript>:

http://img138.imageshack.us/img138/3485/webpagethumbnail.jpg

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.

share|improve this question
2  
As the page scrolls, do you manipulate the noscript element in the DOM in order to show the image? –  w3d Nov 28 '12 at 22:14
    
When scrolling the page which is in the view-port will be loaded using javascript-dom. I'll take the elements noscript / img that are in view-port and will get the SRC="" attribute, I will remove the noscript with javascript and instead will only get the IMG (when the image is loaded). –  Guilherme Nascimento Nov 28 '12 at 22:31
add comment

1 Answer

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>

share|improve this answer
    
The SRC attribute empty is bad. I need something that does not disturb the indexing of images. My question is about indexing images in search engines. It's like I said: My question is not about javascript. Edit your answer please. Thanks. –  Guilherme Nascimento Dec 1 '12 at 14:39
    
Have you created and submitted an XML Image sitemap? –  Anagio Dec 1 '12 at 23:16
    
The problem is that maintaining the Sitemap, HTML pages would have to have maintenance manual. Not the best practice at the time. –  Guilherme Nascimento Dec 1 '12 at 23:21
    
Are you using a CMS? –  Anagio Dec 2 '12 at 1:34
    
I have several websites, made ​​with php, html, asp-classic, .net (c#). I do not use CMS, I develop from scratch. –  Guilherme Nascimento Dec 2 '12 at 1:42
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.