javascript - 延迟加载不适用于由 leaflet/mapbox 添加的图像

Question

我有一个网站，http://atlantaartmap.com ，主页由 http://atlantaartmap.com/art.js 填充。底部有一个导航栏，可在填充 map 的其余部分时附加来自 geojson 文件的许多图像。

我正在尝试使用 http://www.appelsiini.net/projects/lazyload 对这些图像应用延迟加载。我正在测试的网站版本位于 http://atlantaartmap.com/lazy.html ，它使用 http://atlantaartmap.com/lazy_art.js生成一切。

出于某种原因，我无法延迟加载这些图像。我没有将其应用于“lazy”类，而是将其应用于我已有的“navthumb”类。我尝试了其他一些延迟加载插件(揭开是另一个主要插件的面纱)，并且我还尝试将所有内容从基础知识中剥离出来并重新构建它。这个问题是因为我让lazy_art.js 将图像添加到导航条的方式造成的吗？

预先感谢您的帮助。

Answer 1

在调用脚本之前，您已将延迟加载调用放入 html 页面中

$(function() {
    $("img.navthumb").lazyload();
});

调用此函数时，您的缩略图尚未创建。

所以你必须将此调用移至lazy_art.js

var oneArtPlease = L.mapbox.featureLayer()
    .loadURL('art.geojson')
    .addTo(map);

oneArtPlease.on('ready', function() { 
   $("img.navthumb").lazyload();
}); 

引用号:https://github.com/mapbox/mapbox.js/blob/v2.1.4/src/feature_layer.js#L54