用于在网页中按需加载图像，视频的脚本

Some bulletin board systems or content management systems are allowing a user to write a post with images and videos. Image and videos can be inserted with tags img, embed, etc.

一些公告板系统或内容管理系统允许用户写出带有图像和视频的帖子。可以使用img,embed等标签插入图像和视频。

What I want to do is, I want to make a reader decide to load images and videos or not. In other words, I want to put some placeholders saying Click to load. Images below are what I want. But it's a feature of a web browser. I want to implement it in either a server-side or a client-side.

我想做的是,我想让读者决定是否加载图片和视频。换句话说,我想把一些占位符说点击加载。下面的图像是我想要的。但它是网络浏览器的一个功能。我想在服务器端或客户端实现它。

A reason that I want this feature is, some large images, GIFs and autoplay videos are not favorable to mobile phones or to some people.

我想要这个功能的原因是,一些大图像,GIF和自动播放视频不利于手机或某些人。

http://cdn.osxdaily.com/wp-content/uploads/2011/06/click-to-play-flash-example-chrome-300x251.jpg

http://cdn9.howtogeek.com/wp-content/uploads/2014/04/click-to-play-plug-ins4.png

A simple idea is that, examining tags img and embed with regular expression in a certain known area, e.g. <div id="contents"></div>. And if regular expression hits, replacing it with placeholders and a custom-made javscript or PHP function click_to_load().

一个简单的想法是,检查标签img并在某个已知区域嵌入正则表达式,例如,

。如果正则表达式命中,则用占位符和定制的javscript或PHP函数click_to_load()替换它。

Before start from the scratch, I'd like to know whether there is a such library already implementing this.

在从头开始之前,我想知道是否有一个这样的库已经实现了这个。

1 个解决方案

#1

you can do on demand loading in pure JavaScript if you want. If you want to write the function click_to_load() in JavaScript, all you need to do is have an image in HTML with no source, then change the source in JavaScript with the click of a button.

你可以根据需要在纯JavaScript中按需加载。如果你想在JavaScript中编写click_to_load()函数,你需要做的只是拥有一个没有源代码的HTML图像,然后只需点击一下按钮即可在JavaScript中更改源代码。

function click_to_load() {
    document.getElementById("image").src = "http://i.imgur.com/AXTI1Gr.gif";
}

this function changes an images source to a .gif of a cat

此函数将图像源更改为cat的.gif文件

now just add a button with this javascript

现在只需添加一个带有此javascript的按钮

document.getElementById("button").onclick = click_to_load;

example code that works

有效的示例代码