script to load images,videos on demand in web page

Jeon

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.


(source: osxdaily.com)


(source: howtogeek.com)

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.

Ryan Radomski

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.

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

now just add a button with this javascript

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

example code that works

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related