在发送请求之前更改图像的src

Question

我对这个问题进行了大量研究,但没有成功.基本上我想要做的是:
1)用占位符替换所有图像的src-属性,如'blank.gif'2
)添加HTML5数据原始属性与原始图像位置
3)延迟加载图像(它需要data-original属性才能正常工作)

我尝试了但没有成功:
1)document.addEventListener('beforeload', doBeforeLoad, true);
使用此函数附加此eventlistener

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确定它不会工作..

我不知道如果这甚至有可能,所以任何帮助| 建议| 资源将非常感激
PS:例如我想让它在这里工作)(因为它是一个图像沉重的文章)

Answer 1

幸运的是，该技术在较旧的浏览器中使用，但现在现代浏览器不再用这种方式作弊，因此您必须在服务器端执行空白 src 和数据源属性，这里是流行的 jQuery 延迟加载插件主页，http:// www.appelsiini.net/projects/lazyload你敢打赌他们在写这篇文章之前做了很多研究

最新版本的延迟加载并不是网页的替代品。即使您使用 JavaScript 删除 src 属性，新浏览器也会加载图像。现在您必须更改您的 html 代码。将占位符图像放入 img 标签的 src 属性中。真实的图像url应该存储data-original属性。

UPD：稍微想一下，可能更好的数据属性方法是使用noscirpt包装来包装您确实想要延迟加载的图像，这里大致说明了想法http://jsbin.com/uqomeb/2/edit我可能会做简单的jQuery稍后在此基础上插件