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.
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.
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()
.
Before start from the scratch, I'd like to know whether there is a such library already implementing this.