noscript中的图像

Question

注意:我的问题不是关于JavaScript的注意事项:我的问题是如何使搜索引擎可以访问HTML。注意:我的问题不是隐藏文本，而是块加载图像以便使用LazyLoad。注意:测试中使用的库：https://github.com/brcontainer/smooth-images-js

我测试了各种阻止图像加载以使用effect LazyLoad的技术(我是用JavaScript开发的)，这是唯一有效的<noscript>：

HTML structure将与图像的LazyLoad loading一起通过viewport (网页的可见部分)来实现。

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

当带有图像的<noscript>是view-port (网页的可见部分)时。

• jquery获得DOM：$("span.lazyload")。
• jquery检查<noscript> <img>是否在视图端口上。
• 使用jquery创建带有new Image的Image.onload = function(){}。
• 当加载的图像时，Image.onload将在<noscript>之外插入<img>。

为了清晰。假设只有第一个<noscript>是视图端口(<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>)。在onload JavaScript之后，将执行以下操作：

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

编辑我相信Google显示的DOM也被JavaScript修改了。听着，我用工具提取作为谷歌。

查看结果：

没有jquery和<noscript> (即纯HTML)：

使用jquery和<noscript>：

注意:显示图像和操作DOM的JavaScript。

问题：

• 这是搜索引擎的坏习惯(我指的是HTML)？
• 如果这是一个不好的做法，你可以树立一个良好做法的例子吗？
• 如果有另一个问题用“图像”来谈论<noscript>，请原谅我。
• 如果JavaScript显示图像并以Google的形式进行抓取，那么Google会正常显示内容(比如浏览器)，那么Google会索引JavaScript操作的DOM吗？

注意:我没有发现任何怀疑的<noscript>与图像。

Answer 1

我想看看这个问题，所以https://stackoverflow.com/questions/6165643/load-html-then-load-images-using-ajax-in-jquery有一个AJAX懒惰的加载答案和jsfiddle。我会尽量避免使用<noscript>