在不改变src属性的情况下按需加载图像

时间:2014-08-30 11:27:00

标签: javascript html image performance iframe

我有一个网站,每个页面显示40个babynames,每个名称都有一些用户上传的照片。当用户点击"显示照片按钮"我使用iframe来显示每个名字的图像。 (点击后动态创建iframe)。那么在这种情况下,图像永远不会被搜索引擎索引。

如果我在每个名称后面加载它们(而不是在iframe中),那么页面大小将非常大并且加载速度非常慢。

我正在寻找一种在不使用iframe的情况下按需加载图片的方式(就像现在一样)。因为搜索引擎无法访问它们并设置它们会使页面非常重,正如我之前所说的那样,按需设置src将会在内部进行。

有关如何执行此操作的任何建议?

2 个答案:

答案 0 :(得分:1)

当查询字符串结束时,您可以使用显示一个单一缩略图(1x1像素)的PHP脚本" small&#34 ;;使用ajax,您现在可以访问每个图像并删除结尾" small"以便php脚本使用原始文件。 http://php.net/manual/en/function.imagejpeg.php可能有助于^^

所以你访问" image.php?myimage.jpg-small"并且脚本加载在第一次加载后将被缓存的固定缩略图。然后,使用ajax将img src属性更改为" image.php?myimage.jpg"我们已经完成了......

您可以使用.htaccess - 重写以更好地查看图像源......

答案 1 :(得分:0)

如果图片不在那里开始,你真的无法让谷歌对其进行索引 - 你是否可以使用缩略图代替每张图片,以避免加载速度慢并允许谷歌对其进行索引?然后单击,您可以将src标记替换为完整大小的图像。

像Timthumb这样的库可以为你生成和缓存缩略图,如果你不想写所有的大小调整代码。