├── .github ├── FUNDING.yml ├── codeql │ └── codeql-config.yml └── workflows │ ├── badges.yml │ ├── ci.yml │ └── codeql.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── dist ├── dll.cjs ├── dll.cjs.map ├── dll.d.ts ├── dll.js ├── dll.js.map ├── dll.mjs └── dll.mjs.map ├── docs ├── assets │ ├── css │ │ ├── dll.css │ │ ├── prism.css │ │ ├── reset.css │ │ └── tooltip.min.css │ ├── img │ │ ├── apple-touch-icon.png │ │ ├── favicon.ico │ │ └── loader.gif │ └── js │ │ ├── dll.js │ │ ├── dll.js.map │ │ ├── prism.js │ │ └── scripts.js └── index.html ├── package.json ├── pnpm-lock.yaml ├── src ├── dataSRC.ts ├── getMediaElements.ts ├── index.ts ├── loadMedia.ts ├── types.ts ├── utils.ts └── version.ts ├── tsconfig.json └── vite.config.mts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [thednp] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | paths: 2 | - src 3 | -------------------------------------------------------------------------------- /.github/workflows/badges.yml: -------------------------------------------------------------------------------- 1 | name: badges 2 | on: 3 | push: 4 | # update README badge only if the README file changes 5 | # or if the package.json file changes, or this file changes 6 | # IMPORTANT: branches must match 7 | branches: 8 | - master 9 | paths: 10 | - README.md 11 | - package.json 12 | - .github/workflows/badges.yml 13 | pull_request: 14 | # update README badge only if the README file changes 15 | # or if the package.json file changes, or this file changes 16 | # IMPORTANT: branches must match 17 | branches: 18 | - master 19 | paths: 20 | - README.md 21 | - package.json 22 | - .github/workflows/badges.yml 23 | 24 | jobs: 25 | badges: 26 | runs-on: ubuntu-24.04 27 | steps: 28 | - name: Checkout 🛎 29 | uses: actions/checkout@v4 30 | 31 | - name: Update version badges 🏷 32 | run: npx -p dependency-version-badge update-badge typescript vite 33 | 34 | - name: Commit any changed files 💾 35 | uses: stefanzweifel/git-auto-commit-action@v4 36 | with: 37 | branch: master 38 | file_pattern: README.md 39 | commit_message: Updated badges 40 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: 3 | push: 4 | branches: 5 | - master 6 | paths: 7 | - src 8 | - package.json 9 | - .github/workflows/ci.yml 10 | pull_request: 11 | branches: 12 | - master 13 | paths: 14 | - src 15 | - package.json 16 | - .github/workflows/ci.yml 17 | jobs: 18 | test: 19 | runs-on: ubuntu-24.04 20 | name: Test on Node 22 21 | steps: 22 | - name: Checkout 23 | uses: actions/checkout@v4 24 | 25 | - name: PNPM setup 26 | uses: pnpm/action-setup@v3 27 | 28 | - name: Deno Setup 29 | uses: denoland/setup-deno@v2 30 | with: 31 | deno-version: v2.x 32 | 33 | - name: Node Setup 34 | uses: actions/setup-node@v4 35 | with: 36 | node-version: 22 37 | cache: pnpm 38 | 39 | - name: Install Dependencies 40 | run: pnpm install --no-frozen-lockfile 41 | 42 | - name: Install Dependencies 43 | run: pnpm install --no-frozen-lockfile 44 | 45 | - name: Lint 46 | run: pnpm lint 47 | 48 | - name: Build 49 | run: pnpm build 50 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ "master" ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ "master" ] 20 | 21 | jobs: 22 | analyze: 23 | name: Analyze 24 | runs-on: ubuntu-latest 25 | permissions: 26 | actions: read 27 | contents: read 28 | security-events: write 29 | 30 | strategy: 31 | fail-fast: false 32 | matrix: 33 | language: [ 'typescript' ] 34 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 35 | # Use only 'java' to analyze code written in Java, Kotlin or both 36 | # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both 37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v3 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v2 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | config-file: ./.github/codeql/codeql-config.yml 52 | 53 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 54 | # queries: security-extended,security-and-quality 55 | 56 | 57 | # Autobuild attempts to build any compiled languages (C/C++, C#, Go, or Java). 58 | # If this step fails, then you should remove it and run the build manually (see below) 59 | - name: Autobuild 60 | uses: github/codeql-action/autobuild@v2 61 | 62 | # ℹ️ Command-line programs to run using the OS shell. 63 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 64 | 65 | # If the Autobuild fails above, remove it and uncomment the following three lines. 66 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 67 | 68 | # - run: | 69 | # echo "Run, Build Application using script" 70 | # ./location_of_script_within_repo/buildscript.sh 71 | 72 | - name: Perform CodeQL Analysis 73 | uses: github/codeql-action/analyze@v2 74 | with: 75 | category: "/language:${{matrix.language}}" 76 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | experiments 3 | .npmignore 4 | .vscode 5 | test/_screenshots_ 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .github 3 | .gitignore 4 | experiments 5 | node_modules 6 | docs 7 | src 8 | test 9 | tsconfig.json 10 | vite.config.mts -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 thednp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Double Lazy Load 2 | [![ci](https://github.com/thednp/dll/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/dll/actions/workflows/ci.yml) 3 | [![NPM Version](https://img.shields.io/npm/v/@thednp/dll.svg)](https://www.npmjs.com/package/@thednp/dll) 4 | [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/dll.svg)](http://npm-stat.com/charts.html?package=@thednp/dll) 5 | [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/dll/badge)](https://www.jsdelivr.com/package/npm/@thednp/dll) 6 | [![typescript version](https://img.shields.io/badge/typescript-5.8.3-brightgreen)](https://www.typescriptlang.org/) 7 | [![vite version](https://img.shields.io/badge/vite-6.3.5-brightgreen)](https://github.com/vitejs) 8 | 9 | Double Lazy Load for videos, images and background images. Sourced with Typescript. 10 | 11 | 12 | # Demo 13 | Right [here](http://thednp.github.io/dll). Also provides some tips on how to use. 14 | 15 | # npm 16 | ``` 17 | npm install @thednp/dll 18 | ``` 19 | 20 | # Base syntax 21 | ```js 22 | import DLL from '@thednp/dll'; 23 | 24 | DLL('selector',callback); 25 | ``` 26 | 27 | # What it does 28 | * Integrates nicelly into your projects and provides build tools 29 | * Do lazy loading for an element that is subject to lazy load via `data-src`, or 30 | * Do to all child items of a given element 31 | * Do backgroundImage to elements other than <img> if they have data-src attribute. 32 | * Do callback when load event is triggered for one element, or for the last child element of a given parent. 33 | * Do lazy loading for `