---
title: "Lazy Load mit Typoscript"
url: "https://www.typo3.net/d/128543-lazy-load-mit-typoscript"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Frage"]
created: "2021-05-18"
last_reply: "2021-05-18"
replies: 2
solved: true
page: 1
pages: 1
lang: "de"
---

# Lazy Load mit Typoscript

TYPO3 › TypoScript · 2 Antworten · gelöst · gestartet 2021-05-18

## Frage

**Phigiro** · 2021-05-18 · [Beitrag #1](https://www.typo3.net/d/128543-lazy-load-mit-typoscript/1)

Typo3 Version 10.4

Ich möchte folgenden Typoscript-Code umbauen, so dass das src leer ist und der Inhalt dessen in data-src steht.
Eine Lösung habe ich gefunden mit einem Text-Objekt, allerdings fehlen dann Alttext und Titeltext.

Also brauche ich entweder eine Lösung für den Code-Schnipsel mit dem Image-Objekt und dem leeren src und befülltem data-src oder eine Lösung für den zweiten Code-Schnipsel, dass Alttext und Titeltext wieder eingebaut werden.

ICH HABE SCHON GEGOOGELT UND IN DIE API GESEHEN!
Dort bin ich nicht fündig geworden. Es geht immer nur das eine oder das andere.
Einen Tip habe ich bekommen, dass das mit einem COA gehen könnte, allerdings übersteigt dies dann meine Typoscript-Fähigkeiten.

Da dieser Code an vielen Stellen eingetragen ist, kann ich nicht so einfach auf Fluid umstellen.
Die Lösung muss also mit Typoscript geschehen.
Gibt es dafür eine Lösung?

Danke schonmal!!!! :-D

HIer der momentane Codeschnipsel mit Image-Objekt:

```typoscript
 renderObj = IMAGE
                renderObj {
                    file {
                        import.data = file:current:uid
                        treatIdAsReference = 1
                        width = 370c
                        height = 200c
                    }

                    altText {
                        data = file:current:alternative // file:current:title
                        htmlSpecialChars = 1
                    }

                    titleText {
                        data = file:current:title // file:current:alternative
                        htmlSpecialChars = 1
                    }

                    params = class="lazyload img-autoscaled"
                    stdWrap.HTMLparser.tags.img.fixAttrib {
                        width.unset = 1
                        height.unset = 1
                    }
                }
```

Und hier die Lösung mit dem TExt-Objekt:

```typoscript
renderObj = TEXT
		renderObj {
			stdWrap {
				cObject = IMG_RESOURCE
				cObject{
					file {
                                            import.data = file:current:uid
                                            treatIdAsReference = 1
                                            width = 370c
                                            height = 200c
                                        }
				}
			}
			wrap=<img src="" class="lazyload img-autoscaled" data-src="|" />
		}
```

## Beste Antwort

**Phigiro** · 2021-05-18 · [Beitrag #2](https://www.typo3.net/d/128543-lazy-load-mit-typoscript/2)

Ich habe es gelöst und es ist ganz einfach!
Also in das Image-Objekt einfach folgendes eintragen:
layoutKey = srcset
layout {
srcset {
element = <img src="" data-src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
}
}

## Antworten

### [#2](https://www.typo3.net/d/128543-lazy-load-mit-typoscript/2) · Phigiro · 2021-05-18 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

### [#3](https://www.typo3.net/d/128543-lazy-load-mit-typoscript/3) · Teisinger · 2021-05-18

Also Hinweis gedacht:
Moderne Browser (außer drecks Apple Safari) unterstützen das "loading"-Attribute (<img loading="lazy">).
Damit solltest du deinen oben erwähnten "Workaround" nicht mehr benötigen.

---

Quelle: „Lazy Load mit Typoscript“, typo3.net, https://www.typo3.net/d/128543-lazy-load-mit-typoscript
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.