react-lazy-load-image-component 1.5.0 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +5 -4
- package/.eslintrc +2 -2
- package/.github/workflows/codeql-analysis.yml +71 -0
- package/README.md +12 -0
- package/build/index.js +1 -1463
- package/package.json +26 -26
- package/src/hoc/trackWindowScroll.js +5 -5
- package/src/utils/get-scroll-ancestor.ts +35 -0
- package/webpack.config.js +20 -11
- package/src/utils/get-scroll-element.js +0 -39
package/.babelrc
CHANGED
package/.eslintrc
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"extends": "eslint:recommended",
|
3
|
-
"parser": "babel-
|
3
|
+
"parser": "@babel/eslint-parser",
|
4
4
|
"env": {
|
5
5
|
"browser": true,
|
6
6
|
"node": true,
|
@@ -24,7 +24,7 @@
|
|
24
24
|
"curly": [1, "multi-line"],
|
25
25
|
"dot-location": [1, "property"],
|
26
26
|
"dot-notation": 1,
|
27
|
-
"eqeqeq":
|
27
|
+
"eqeqeq": 1,
|
28
28
|
"guard-for-in": 1,
|
29
29
|
"no-alert": 1,
|
30
30
|
"no-caller": 2,
|
@@ -0,0 +1,71 @@
|
|
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
|
+
name: "CodeQL"
|
7
|
+
|
8
|
+
on:
|
9
|
+
push:
|
10
|
+
branches: [master]
|
11
|
+
pull_request:
|
12
|
+
# The branches below must be a subset of the branches above
|
13
|
+
branches: [master]
|
14
|
+
schedule:
|
15
|
+
- cron: '0 14 * * 1'
|
16
|
+
|
17
|
+
jobs:
|
18
|
+
analyze:
|
19
|
+
name: Analyze
|
20
|
+
runs-on: ubuntu-latest
|
21
|
+
|
22
|
+
strategy:
|
23
|
+
fail-fast: false
|
24
|
+
matrix:
|
25
|
+
# Override automatic language detection by changing the below list
|
26
|
+
# Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
|
27
|
+
language: ['javascript']
|
28
|
+
# Learn more...
|
29
|
+
# https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
|
30
|
+
|
31
|
+
steps:
|
32
|
+
- name: Checkout repository
|
33
|
+
uses: actions/checkout@v2
|
34
|
+
with:
|
35
|
+
# We must fetch at least the immediate parents so that if this is
|
36
|
+
# a pull request then we can checkout the head.
|
37
|
+
fetch-depth: 2
|
38
|
+
|
39
|
+
# If this run was triggered by a pull request event, then checkout
|
40
|
+
# the head of the pull request instead of the merge commit.
|
41
|
+
- run: git checkout HEAD^2
|
42
|
+
if: ${{ github.event_name == 'pull_request' }}
|
43
|
+
|
44
|
+
# Initializes the CodeQL tools for scanning.
|
45
|
+
- name: Initialize CodeQL
|
46
|
+
uses: github/codeql-action/init@v1
|
47
|
+
with:
|
48
|
+
languages: ${{ matrix.language }}
|
49
|
+
# If you wish to specify custom queries, you can do so here or in a config file.
|
50
|
+
# By default, queries listed here will override any specified in a config file.
|
51
|
+
# Prefix the list here with "+" to use these queries and those in the config file.
|
52
|
+
# queries: ./path/to/local/query, your-org/your-repo/queries@main
|
53
|
+
|
54
|
+
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
55
|
+
# If this step fails, then you should remove it and run the build manually (see below)
|
56
|
+
- name: Autobuild
|
57
|
+
uses: github/codeql-action/autobuild@v1
|
58
|
+
|
59
|
+
# ℹ️ Command-line programs to run using the OS shell.
|
60
|
+
# 📚 https://git.io/JvXDl
|
61
|
+
|
62
|
+
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
|
63
|
+
# and modify them (or add more) to build your code if your project
|
64
|
+
# uses a compiled language
|
65
|
+
|
66
|
+
#- run: |
|
67
|
+
# make bootstrap
|
68
|
+
# make release
|
69
|
+
|
70
|
+
- name: Perform CodeQL Analysis
|
71
|
+
uses: github/codeql-action/analyze@v1
|
package/README.md
CHANGED
@@ -252,6 +252,18 @@ export default trackWindowScroll(Gallery);
|
|
252
252
|
|
253
253
|
## Common errors
|
254
254
|
|
255
|
+
### All images are being loaded at once
|
256
|
+
|
257
|
+
This package loads images when they are visible in the viewport. Before an image is loaded, it occupies 0x0 pixels, so if you have a gallery of images, that means all images will be in the visible part of the page until the first ones load and start pushing down the other ones.
|
258
|
+
|
259
|
+
To fix this issue, make sure you either set a `height` and `width` props or a `placeholder` to your images.
|
260
|
+
|
261
|
+
### Effects are not working
|
262
|
+
|
263
|
+
You need to import the effect CSS as shown in the [Using effects](#using-effects) code example.
|
264
|
+
|
265
|
+
Also, notice browsers might behave differently while images are loading. Some times, while an image is not completely loaded yet, the browser will show a white background behind it, making the effect not to be visible. This is an issue with browsers and not something that can be fixed in this package.
|
266
|
+
|
255
267
|
### Warning: setState(...): Can only update a mounted or mounting component.
|
256
268
|
|
257
269
|
That warning might appear if there are two components using `trackWindowScroll` at the same time. Notice it's not possible to have a LazyLoadImage/LazyLoadComponent inside another LazyLoadComponent for now. Also, make sure you are passing down `scrollPosition` to all components wrapped inside `trackWindowScroll`.
|