我有一系列以图像为背景的 div,相当大的图像,1-2 MB。
我想做的只是在它们可见时才加载其中的内容。
(默认情况下它们是 display:none 和 onclick 我使用 jquery 将它们向下/向上滑动的各种链接)。
我有一系列以图像为背景的 div,相当大的图像,1-2 MB。
我想做的只是在它们可见时才加载其中的内容。
(默认情况下它们是 display:none 和 onclick 我使用 jquery 将它们向下/向上滑动的各种链接)。
你应该发布你的代码,但我认为这可能是你正在寻找的。
html
<a href="#">Link to click</a>
<div id="imgname"></div>
jQuery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
发送 html 并向下滑动 div 块
<a href="#">Link to click</a>
<div id="imgname"><img src="image.path" /></div>
下面是一个可能可行的想法的粗略草图。为要加载的每张照片创建隐藏的图像标签,直接附加 onload 事件处理程序。insert
只需获取刚刚加载的图像并创建一个 cssbackground
规则以插入到适当的div
.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>