在 javascript/leaflet 中延迟加载由 appendChild() 附加的图像

Question

我正在开发一个网站 http://atlantaartmap.com，该网站使用 leaflet/mapbox 绘制亚特兰大周围的街头艺术。图像详细信息是从 geojson 文件中读取的。当传单正在读取 geojson 时，我将缩略图附加到底部的导航栏，该导航栏也 link 到相应的地图标记。附加图像而不是对它们进行硬编码允许我更新单个文件来更改页面的所有方面。

我正在尝试对这些图像使用延迟加载，但它似乎不适用于使用 java 脚本附加的项目。有什么建议吗？

这是我正在测试的页面的惰性版本：http://atlantaartmap.com/lazy.html

这是网站的正常版本：http://atlantaartmap.com

提前致谢。

编辑：为澄清起见，我希望延迟加载脚本避免加载图像，直到它们在 window.

内

Answer 1

试试打电话

$("img.navthumb").lazyload();

使用 JavaScript 方法 appendChild() 动态注入缩略图代码后。

此外，如果你 post 一个 JSFiddle，我可以更好地帮助你。

希望对您有所帮助！！！

Answer 2

我就扔掉插件自己动手吧，其实做起来很简单。您使用加载图像作为源创建一个图像元素，将其作为子元素附加到您的 (link) 元素：

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 和插件，这样可以减少加载两个依赖资产，这样您的页面加载速度也会更快。 Win/win 情况如果你问我 ;)

这是 JSFiddle 上的概念示例：http://jsfiddle.net/waud32ta/

Answer 3

我真的建议你试试 lazySizes。与其他 lazyloader 不同，它是一个自初始化脚本，可自动检测新元素及其可见性。所以你不需要在这里调用或配置任何东西。只需使用 class lazyload 附加图像并将您的来源添加到 data-src 属性。就是这样：

<img src="spinner.gif" data-src="image.jpg" class="lazyload" />

此处is a simple demo.

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>

Answer 4

好的，到目前为止你已经强调了 jQuery 应该是 avoided. But I think it's possible to use micro-plugins which contains only the logic you really need. One of them is 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
});

在 javascript/leaflet 中延迟加载由 appendChild() 附加的图像

Lazy loading images that are appended by appendChild() in javascript/leaflet

javascript

jquery

lazy-loading

leaflet

mapbox