使用jQuery加载延迟图像

我有一个包含多个图库的页面，包括手风琴和滑块。问题在于该页面需要永久加载。有没有办法在一些代码中包装图像或者向其中应用一个类来强制它在加载其他所有内容后才加载？使用jQuery加载延迟图像

2010-05-24 DCD

当然可以。替换为“＃”您的IMG SRC属性，并添加自定义属性，像这样：

<img src="#" delayedsrc="http://mydomain.com/myimage.png"/ >

然后，添加一个JavaScript线的时候你的页面加载，做这样的事情（未经测试，但你的想法）：

$('img').each(function(){ 
    $(this).attr('src', $(this).attr('delayedsrc')); 
});

来源

2010-05-24 14:20:55 jvenema

狡猾，这可能就是我需要的。 – DCD 2010-05-24 14:23:54

您可能需要使用blank.gif而不是＃来保持IE快乐，但它应该起作用。 – jvenema 2010-05-24 14:27:37

我喜欢它，很好的方法:) – Justin 2010-05-24 15:23:02

只保留一个图像到HTML，使观众有东西入手，然后用

$(document).ready(function() { 
    //load rest of the images 
});

您还可以使用事件负载注射使用jQuery休息ers和AJAX或“随时加载”，只要建立一个简单的回叫功能，如果它是自动旋转图库或点击加载。

来源

2010-05-24 14:21:32 Tumharyyaaden

如果您使用的是jQuery（并且我假设您是这样标记的），请查看Lazy Load Plugin for jQuery。它会延迟加载视口外的图像，直到用户滚动到它们。

更新2015年：这个插件被打破了一个点，但现在再次工作。最后一条评论同样多，但我几乎错过了它，因为它隐藏在折叠的评论中。

来源

2010-05-24 14:22:02

它会显示技术上仅在视口内被遮挡的图像吗？ – DCD 2010-05-24 14:23:30

测试它并找出:-)它是一个非常易于使用的插件。 – Erik 2010-05-24 14:28:07

不幸的是，该插件不再支持 - （来自网站）“Lazy Load目前无法使用，它不能像预期的那样用最新的浏览器工作，我现在没有时间自己更新代码。你找到一个解决方案只是叉和发送拉请求，谢谢！“ – 2011-01-12 18:18:38

延迟加载图像（和iFrames）的简单方法是使用纯JS，jQuery.data（）和自定义HTML5数据属性的组合。图像的src最初可以指向加载GIF。 data- *属性包含您最终要加载的图像的URL路径。纯JS建立了一个延迟（在下面的例子中为3000毫秒），然后执行jQuery.data（），它将图像的src设置为想要的图像。

以下示例在class =“load-delay”的每个图像上执行。

活生生的例子：http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

CODE

JS和jQuery：

$(document).ready(function() { 
    setTimeout(function() { 
    $('.load-delay').each(function() { 
     var imagex = $(this); 
     var imgOriginal = imagex.data('original'); 
     $(imagex).attr('src', imgOriginal); 
    }); 
    }, 3000); 
});

HTML和jQuery库：

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <meta charset="utf-8" /> 

</head> 
<body> 
    <h1>Loading-Delayed Image</h1> 
    <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" /> 
</body> 
</html>

来源

2013-07-18 23:12:27 seandebutts

这样做绝对没有任何“延迟加载”插件或类似的技巧，非常适合没有卷动涉及的单页网站，所有交互都可以在折叠之上进行，可以这么说。非常感激！ – Systembolaget 2015-11-22 22:32:57

使用jQuery加载延迟图像

回答

相关问题