5

我对这个问题做了很多研究，但没有成功。基本上我想要做的是：
1）用占位符替换所有图像的 src- 属性，例如'blank.gif'
2）使用原始图像位置添加 HTML5 data-original 属性
3）延迟加载图像（它需要 data-original 属性才能正常工作）

我没有成功的尝试： 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：例如，我想让它在这里工作）（因为它是一篇图像繁重的文章）

4

3 回答 3

3

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

于 2013-01-19T13:55:30.330 回答
2

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

于 2013-01-19T14:04:04.037 回答
1

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

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

UPD：稍微考虑一下，可能更好的数据属性方法是noscirpt对你想要加载的图像使用包装 lazlily 在这里大致说明想法http://jsbin.com/uqomeb/2/edit我可能会做简单的 jQuery插件稍后基于此

于 2013-01-19T14:03:24.880 回答