更改图像的SRC请求已发送之前， [英] Change src of image before request has been sent

问题描述

我做了很多关于这个问题的研究，但没有成功。
从本质上讲就是我想要做的是这样的：

1）更换一个占位符的所有图像的src-属性，如blank.gif'

2）与原始图像的位置
添加HTML5数据初始属性
3） Lazyload 图像（它需要的数据初始属性才能正常工作）



我试了一下没有成功：

1）把此事件侦听 document.addEventListener（beforeload'，doBeforeLoad，真实）;

使用此功能

I did a lot of research about this problem, but with no success. Essentially what I want to do is this:
1) Replace the src- attribute of all images with a placeholder, like 'blank.gif'
2) Add the HTML5 data-original attribute with the original image location
3) Lazyload the images (it needs the data-original attribute to work properly)

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）的document.ready肯定它不会工作..

2) on document.ready sure it won't work..

我不知道的的如果的这甚至有可能，所以任何帮助|建议|资源将大大AP preciated

PS：比如我要使它工作这里）（因为这是一个图像重文）

I have no idea if this is even possible, so any help | suggestion | resource would be greatly appreciated
PS: for example I want to make it work here) (because it's a image-heavy article )

推荐答案

这技术是与运气老的浏览器中使用，但现在现代浏览器都不再使用这种方式骗了，所以你要做的空白src和数据源属性在服务器端，这里是流行的jQuery延迟加载插件的主页， http://www.appelsiini.net/projects/ lazyload 你打赌，他们做了很多的研究，写这之前

That technique was used in older browsers with luck, but now modern browsers are not longer cheated with this way, so you have to do blank src and data source attribute on server side, here is popular jQuery lazy load plugin homepage, http://www.appelsiini.net/projects/lazyload you bet they did a lot of researches before writing this

延迟加载最新版本是不是在更换下降到您的网页。新的浏览器，即使你删除了JavaScript src属性加载图像。现在，你必须改变你的HTML code。把占位符图像传送到img标签的src属性。真实图像的URL应该被存储的数据，原始属性。

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

UPD：只是觉得过了一下，以数据 - 属性可能更好的办法是使用 noscirpt 包装为你想装lazlily这里大致插图的想法<一个图像HREF =htt​​p://jsbin.com/uqomeb/2/edit相对=nofollow> http://jsbin.com/uqomeb/2/edit 我可能会做一些简单的jQuery插件，后来根据这种

UPD: just think over a bit and probably better approach to data- attribute would be using noscirpt wrapping for images you do want loaded lazlily here roughly illustration for idea http://jsbin.com/uqomeb/2/edit I would possibly do simple jQuery plugin later based on this

这篇关于更改图像的SRC请求已发送之前，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！