Question

我对这个问题进行了很多研究，但没有成功。基本上我想做的是这个：
1）用占位符替换所有图像的src-属性，例如＆lt; blank.gif＆＃39;
2）添加HTML5数据原始属性与原始图像位置
3）Lazyload图像（它需要数据原始属性才能正常工作）

我没有成功的尝试：
1）附加此事件监听器document.addEventListener('beforeload', doBeforeLoad, true);
有这个功能

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：例如我想让它发挥作用here）（因为它是一个图像沉重的文章）

Answer 1

在您开始执行JS之前，浏览器将开始发出请求。我建议您将源html更改为延迟加载图像所需的data模式。这需要在浏览器收到之前发生。如果它是服务器生成的话，这不应该太麻烦。

Answer 2

听起来你正在做的事情相当于添加一个img而你正在通过修改图像的想法接近它。如果您使用占位符span或类似的东西，那么您可以避免整个问题，并考虑更少的变量。使用数据集创建所需信息的范围，并选择附加背景图像的class以指示图像尚未加载，然后在页面加载时找到相应的span ■插入img元素（或者如果愿意，则替换span），并进行任何其他清理，例如删除“加载”样式class。这可以允许以不太可能处于不一致状态的方式构建页面。

Answer 3

这种技术在旧浏览器中运用很幸运，但现在现代浏览器不再以这种方式欺骗，所以你必须在服务器端做空白的src和数据源属性，这里是流行的jQuery延迟加载插件主页，{ {3}}你打赌他们在写这篇文章之前做了很多研究

最新版本的Lazy Load不是替代您的网页的替代品。即使您使用JavaScript删除src属性，新浏览器也会加载图像。现在你必须改变你的HTML代码。将占位符图像放入img标记的src属性中。真实图像网址应存储数据原始属性。

UPD：只考虑一下，可能更好的数据属性方法是使用noscirpt包装你想要加载的图像lazlily这里粗略地说明想法http://www.appelsiini.net/projects/lazyload我可能会做简单的jQuery稍后基于此

的插件

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

3 个答案: