我正在使用一个网站http://atlantaartmap.com，该网站使用传单/地图集来描绘亚特兰大周围的街头艺术。从geojson文件中读取图像详细信息。当传单正在读取geojson时，我将缩略图附加到底部的导航栏，该导航栏也链接到相应的地图标记。添加图像而不是硬编码允许我更新单个文件以更改页面的所有方面。
我试图在这些图像上使用延迟加载，但它似乎不适用于使用java脚本附加的项目。有什么提示吗？
以下是我正在测试的网页的懒惰版本：http://atlantaartmap.com/lazy.html
以下是该网站的正常版本：http://atlantaartmap.com
提前致谢。
编辑：为了澄清，我希望延迟加载脚本避免加载图像，直到它们在窗口内。
答案 0 :(得分：2)
我会抛弃插件并自己动手，实际上这很简单。您使用加载图像作为源创建一个图像元素，将其作为子项追加到您的（链接）元素：
var image = new Image();
image.src = 'images/loading.gif';
link.appendChild(image);
接下来，您创建另一个图像元素，并将实际图像作为源，但您不需要将其附加到任何内容。只需要监听onload事件，然后交换源：
var original = new Image();
original.src = feature.properties.image;
original.onload = function () {
image.src = original.src;
}
这应该像魅力一样。现在你可以省略jQuery和插件，这样两个依赖资产的加载就更少了，所以你的页面也加载得更快。如果你问我，你会赢/胜;）
这是JSFiddle概念的一个例子：http://jsfiddle.net/waud32ta/
答案 1 :(得分：1)
尝试拨打
$("img.navthumb").lazyload();
使用JavaScript方法appendChild（）动态注入缩略图代码。
此外，如果您发布JSFiddle，我将能够更好地帮助您。
希望它有所帮助!!!
答案 2 :(得分：1)
我真的建议您尝试lazySizes。与其他lazyloader不同，它是一个自我初始化脚本，可自动检测新元素及其可见性。所以你不需要在这里打电话或配置任何东西。只需在类lazyload附加图片，然后将您的来源添加到data-src属性即可。那就是它：
<img src="spinner.gif" data-src="image.jpg" class="lazyload" />
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 40;
window.lazySizesConfig.addClasses = true;
document.querySelector('.add').onclick = function(){
document.querySelector('.scroll-doc').innerHTML = document.querySelector('.template').innerHTML;
};.scroll-area {
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 80%;
margin: auto;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
.add {
font-size: large;
font-weight: bold;
}<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<button type="button" class="add">add to scroll area</button>
<div class="scroll-area">
<div class="scroll-doc"></div>
</div>
<script type="text/html" class="template">
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/9"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/9"
alt="" />
</div>
</div>
</script>
答案 3 :(得分：0)
好的，到目前为止，您已经强调jQuery应该是avoided。但我认为可以使用仅包含您真正需要的逻辑的微插件。其中一个是justlazy。它是一个延迟加载库，没有外部依赖关系，并提供紧凑的图像加载代码。
首先，您必须定义占位符：
<span data-src="path/to/image" data-alt="some alt text"
data-title="some title"
class="justlazy-placeholder">
</span>
还可以将占位符定义为img-tag，以便更加SEO友好。另一个功能是使用srcset属性加载响应式图像。
第二步是通过javascript初始化延迟加载：
Justlazy.registerLazyLoadByClass("justlazy-placeholder"{
// defines that the image will be loaded
// 200 pixels before it gets visible
threshold: 200
});