首页 文章

延迟加载由javascript / leaflet中的appendChild（）追加的图像

提问于
浏览 次
0

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

我试图在这些图像上使用延迟加载，但它似乎不适用于使用java脚本附加的项目 . 有小费吗？

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

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

提前致谢 .

编辑：为了澄清，我想延迟加载脚本，以避免加载图像，直到它们在窗口内 .

javascript jquery lazy-loading leaflet mapbox

4 回答

  • 2

    我真的建议你试试lazySizes . 与其他lazyloader不同，它是一个自我初始化脚本，可自动检测新元素及其可见性 . 所以你不需要在这里调用或配置任何东西 . 只需使用类 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>
    回复于
  • 1

    我会抛弃插件并自己动手，实际上这很简单 . 您使用加载图像作为源创建一个图像元素，将其作为子项追加到您的（链接）元素：

    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/

    回复于
  • 0

    试着打电话

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

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

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

    希望能帮助到你！！！

    回复于
  • 1

    好的，到目前为止，您已经突出显示jQuery应该是avoided . 但我认为可以使用仅包含您真正需要的逻辑的微插件 . 其中一个是justlazy . 它是一个延迟加载库，没有外部依赖关系，并提供紧凑的图像加载代码 .

    First ，您必须定义占位符：

    <span data-src="path/to/image" data-alt="some alt text"
      data-title="some title"
      class="justlazy-placeholder">
</span>

    也可以将占位符定义为img-tag以更加SEO友好 . 另一个功能是使用srcset属性加载响应式图像 .

    second step 是通过javascript初始化延迟加载：

    Justlazy.registerLazyLoadByClass("justlazy-placeholder"{
    // defines that the image will be loaded
    // 200 pixels before it gets visible
    threshold: 200
});
    回复于

相关问题