DCD*_*DCD 27 html javascript css jquery
我有一个页面,包括几个画廊,包括手风琴和滑块.问题是页面需要永远加载.有没有办法在一些代码中包装图像或对它应用一个类来强制它只在加载其他所有内容后加载？
jve*_*ema 56
你当然可以.用"#"替换你的img src属性,并添加一个自定义属性,如下所示:
<img src="#" data-delayedsrc="/img/myimage.png" />
然后,在页面加载时添加一个javascript行,执行如下操作:
$('img').each(function(){
$(this).attr('src', $(this).data('delayedsrc'));
});
如果你正在使用jQuery(我假设你是这样被标记的话),请看一下jQuery的Lazy Load Plugin.它会延迟加载视口外部的图像,直到用户滚动到视口.
更新2015:这个插件一度被破坏,但现在再次运行.最后的评论同样多,但我几乎错过了,因为它隐藏在倒塌的评论中.
小智 6
延迟加载图像(和iFrames)的一种简单方法是结合使用纯JS,jQuery.data()和自定义HTML5 data-*属性.图像的src最初可以指向加载GIF.data-*属性包含您最终要加载的图像的URL路径.纯JS设置延迟(在下面的示例中为3000毫秒),然后执行jQuery.data(),它将图像的src设置为预期的图像.
下面的示例对每个图像执行class ="load-delay".
实例:http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
码
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>