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

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

本文关键字：leaflet 图像 javascript appendChild 延迟加载      更新时间：2023-09-26

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

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

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

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

提前谢谢。

编辑：为了澄清起见，我希望延迟加载脚本避免加载图像，直到它们在窗口内。

我会扔掉插件并自己做，这实际上非常简单。您创建一个图像元素，将加载图像作为源，将其作为子元素附加到您的（链接）元素：

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/

我真的建议你试试懒惰的大小。与其他懒惰加载器不同，它是一个自初始化脚本，可自动检测新元素及其可见性。因此，您无需在此处调用或配置任何内容。只需将图像附加到类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>

尝试调用

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

在使用 JavaScript 方法 appendChild（） 动态注入缩略图代码后。

另外，如果您发布JSFiddle，我将能够更好地帮助您。

希望对您有所帮助!!

好的，到目前为止，您已经强调应该避免使用jQuery。但我认为可以使用只包含您真正需要的逻辑的微插件。其中之一是正义的懒惰。它是一个延迟加载库，没有外部依赖项，并提供紧凑的图像加载代码。

首先，您必须定义占位符：

<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
});

相关文章：