Geek Answers Handbook

Change src image before sending request

I have researched this problem a lot, but to no avail. Essentially, I want to do this:
1) Replace the src attribute on all images with a placeholder, for example 'blank.gif'
2) Add the original HTML5 data attribute with the original image location
3) Lazyload images (for the correct use of the data-original attribute)

What I tried without success:
1) attaching this eventlistener document.addEventListener('beforeload', doBeforeLoad, true);
with this function

 function beforeload() { var blank = 'image/location/images/blank.gif'; $('img').each(function() { var orig = $(this).attr('src'); $(this).attr('data-original',orig); $(this).attr('src',blank); console.log("changing all data on images"); }); }


2) on the document. Already sure that this will not work.


I have no idea if this is possible, so any help | offer | the resource will be very grateful
PS: for example, I want to make it work here ) (because it's a heavy article)

+4
source share
3 answers

This technology was used in old browsers with luck, but now modern browsers are no longer fooled in this way, so you need to make a clean attribute src and data source on the server side, here is the popular jQuery lazy load plugin page, http://www.appelsiini.net / projects / lazyload you bet you have done a lot of research before writing this

The latest version of Lazy Load is not a replacement for your web page. Newer browsers load the image, even if you remove the src attribute using JavaScript. Now you have to change your html code. Place the placeholder image in the src attribute of your img tag. The actual image URL must be stored in the data-original attribute.

UPD: just think a little, and probably the best approach to the data attribute would be to use noscirpt wrapping for the images you want to load lazlily here, roughly to illustrate http://jsbin.com/uqomeb/2/edit I could do simple jQuery plugin later based on this

+1
source

The browser will start making requests before you can start executing JS. I recommend that you change the HTML source code to the data template, which is required for lazy loading of images. This must happen before the browser receives it. This should not be too big a problem if the server is generated.

+2
source

It looks like you want to do what img adds, and yet you get closer to it with the idea of ​​changing the image. If you use a span placeholder or something similar, you can avoid the whole question and have fewer variables. Create a range with a data set for the necessary information and, optionally, a class that attaches a background image to indicate that the image has not been loaded, and then on the page load find the appropriate span insert img (or replace span if necessary) and do any another cleanup, such as removing the class loading style. This could allow you to structure your page in a way that is less likely to ever be in an inconsistent state.

+2
source

More articles:


All Articles