afbeeldingen achteraf laden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior PHP developer

Functie Samen met je development team werk je Agile Scrum en met jullie gezamenlijke kennis en ervaring bepalen jullie samen de beste keuze voor techniek en architectuur. Naast het ontwikkelen van software ben je continue bezig om ook jezelf te ontwikkelen. Ze werken met o.a.: PHP, Laravel, Doctrine, PHP Unit, Behat, React, TypeScript, (My)SQL, Postgress, Redis, ElasticSearch, Docker, Nginx, GIT flow, JIRA, AWS. Eisen • HBO werk- en denkniveau • Je hebt goede kennis en ervaring met PHP • Je bent niet bang voor complexe projecten • Je werkt graag zelfstandig aan applicaties • Je bent altijd nieuwsgierig naar nieuwe

Bekijk vacature »

Senior/Lead Python developer

Functie Samen met je team, bestaande uit een senior, 2 mediors en één junior ontwikkelaar ga je op een Agile-gebaseerde aanpak werken aan hun software. Je hebt oog voor kwaliteit, risico’s en klantbelang. Communicatie met je collega’s en waar nodig ook met klanten speelt een belangrijke rol in het bereiken van een succesvol resultaat. Als persoon ben je slim, krijg je dingen voor elkaar en ga je resultaatgericht te werk. Binnen het development team is er veel zelfstandigheid, los van de stand-up (10:00 uur) en zo nu en dan pair-programming sessies. Technieken die zij gebruiken zijn o.a. Python, Django, MySQL,

Bekijk vacature »

Back end developer Digital agency

Functie Heb jij altijd al eens bij een bedrijf willen werken waar jij géén nummertje bent, die alleen maar uitvoerend werk doet? Dan zou je hier perfect passen! Tuurlijk, je werkt aan projecten voor grote of kleine bedrijven… Het enige verschil hier is, jouw mening telt hier écht. Jouw inbreng wordt gewaardeerd, serieus genomen en gebruikt. En vergeet niet, je werkt niet alleen aan deze projecten. Er werken in totaal ruim 20 developers en designers, onderverdeeld over 3 development teams. Voornamelijk bestaande uit Medior en Senior developers, die samen voor een inspirerende en ambitieuze omgeving zorgen. Hun visie is namelijk

Bekijk vacature »

IT Infrastructuur Developer

IT Infrastructuur Developer Ben jij (bijna) klaar met je HBO studie in de richting van IT? Opzoek naar een spannende eerste baan, waar je ontzettend veel kan leren? Dan hebben wij de ultieme job voor jou! Voor een goede klant van ons in de financiële dienstverlening zijn wij opzoek naar een Junior Infrastructure Developer. Deze baan is een mooie kans om een sterke start te geven aan jouw carrière binnen de IT! De job Je werkt nauw samen met het Devops team, en zal je voornamelijk bezighouden met het automatiseren van infrastructure componenten. De componenten worden opgevraagd door het DevOps

Bekijk vacature »

Senior Front end developer Automotive Angular

Functie Als Senior Front end developer kom je te werken in een team van 11 developers. 9 van de 11 focussen zich op back end, welke is geschreven in Java, en 2 op de front end waarbij er gebruik wordt gemaakt van Typescript en Angular. De focus in deze rol ligt op 2 aspecten; doorontwikkeling van de eigen tooling en gebruik van de tooling t.b.v. klantprojecten. Momenteel zijn ze in de afrondende fase van een project waarbij ze het gehele verkoopproces van nieuwe auto’s anders ingeregeld hebben voor een grote dealer in Nederland. Waarbij Auto’s normaliter pas verkocht werden in

Bekijk vacature »

Team Lead/ Lead developer gezocht (Hands-on, PHP,

Functie Als Team Lead ben je de leider van één van de ontwikkelteams binnen de organisatie. Je leidt als lead developer een goed draaiend team dat werkt aan complexe en duurzame applicaties en API’s. Vanuit je kennis en ervaring ben je in staat het grote plaatje te blijven overzien, en kritisch mee te denken over bijvoorbeeld de architectuur, maar ook de algehele aanpak binnen het project. Je laat je team niet alleen technisch goed functioneren maar ben ook betrokken bij het menselijke aspect. Zo weet jij je collega’s te motiveren en begeleiden in hun dagelijkse werk. Buiten het team ben

Bekijk vacature »

C# .NET Software Ontwikkelaar

Functie omschrijving C# .NET Developer gezocht. Ben jij een full stack developer die op zoek is naar een nieuwe uitdaging binnen een leuk snel groeiend bedrijf? Lees dan snel verder! Wij zijn op zoek naar een Developer met ervaring op het gebied van .NET die een organisatie in de regio Arnhem gaat versterken. Jij gaat je binnen dit bedrijf vooral bezighouden met het verbeteren van de functionaliteiten van hun dataplatform. Samen met andere ontwikkelaars denk je mee in oplossingsrichtingen, architectuur en nieuwe technologieën. Als C# .NET Developer binnen dit bedrijf houd je je niet alleen bezig met het verbeteren van

Bekijk vacature »

Software Developer

Functie omschrijving Heb jij affiniteit met ICT en een WO diploma in de pocket? Dan ben je hier aan het juiste adres. Voor een opdrachtgever in Amsterdam zijn wij op zoek naar kandidaten die (enige) ervaring hebben met Java, Javascript, C of C++. Je zal door middel van trainingen worden opgeleid tot een volwaardige Software Developer. Er wordt tijdens de training natuurlijk veel aandacht besteedt aan de vaktechnische aspecten, maar er gaat ook veel aandacht uit naar jouw persoonlijke ontwikkeling. Bedrijfsprofiel Bij deze opdrachtgever in de omgeving van Amsterdam zoeken ze meerdere enthousiaste kandidaten die hun carrière willen starten met

Bekijk vacature »

Trainee pega developer

Wil jij een mooie stap maken in jouw carrière? Mooi! Bij De Mandemakers Groep haal je binnen 6 maanden je CSA- en CSSA-certificaten, waarna jij aan de slag kan als Pega-developer in ons IT-team. Achter de schermen zorg jij ervoor dat collega’s efficiënt werken en klanten iedere dag beter geholpen worden. Wil jij daaraan bijdragen? En jouw ICT-skills ontwikkelen? Lees dan snel verder en solliciteer vandaag nog als trainee Pega-developer. Wat ga je doen? Als trainee Pega developer leiden wij je op tot gecertificeerd software developer voor het low-code platform PegaSystems. In de training ben je verantwoordelijk voor een te

Bekijk vacature »

Database developer - SQL

Functie omschrijving Kan jij goed overweg met complexe algoritmes en het schrijven van procedures in T-SQL? Heb jij al wat ervaring opgedaan met SQL en vind je het tijd voor de volgende stap? Lees dan snel verder! Dit software bedrijf, gespecialiseerd in de ontwikkeling van logistieke software, is op zoek naar een ervaren SQL database developer. Jouw werkzaamheden zullen onder andere bestaan uit: Je sluit aan bij meetings en brengt het gehele logistieke proces in kaart. Vervolgens ga je als lead developer aan de slag om de klus te klaren. Je stuurt het junior developer team en helpt, zo nodig,

Bekijk vacature »

Traineeship Full Stack Java developer

Dit ga je doen Start jij op 7 augustus bij de Experis Academy dan kickstart jij jouw IT-carrière! We leiden je op tot een gewilde Full Stack Java Developer met alle kennis en vaardigheden die nodig zijn om de arbeidsmarkt te betreden. Wat kun je verwachten, hoe zit een dag in het leven van een Trainee eruit? Periode 1 Als Full Stack Java Developer Trainee volg je vanuit huis een op maat gemaakte onlinetraining die in het Engels wordt gegeven. De tijd die je kwijt bent aan het volgen van de training kun je vergelijken met een fulltime werkweek. In

Bekijk vacature »

PHP Developer

Functie omschrijving Als PHP / Laravel developer zal je in een klein team terecht komen. Wij zijn op zoek naar een echte specialist, iemand die de balans weet te vinden tussen techniek en perfectie. In de aankomende jaren wilt dit bedrijf flink groeien en daarom zijn ze op zoek naar jou! Wat ga je doen? Je draagt bij aan het ontwikkelen en onderhouden van bestaande webapplicaties die boordevol functionaliteit zitten. Deze applicaties worden gebruikt door de organisatie zelf en ook door de klanten. Inmiddels wordt er gewerkt met Laravel 8 en zijn er diverse koppelingen naar externe leveranciers. Verder zal

Bekijk vacature »

.NET Developer

Functie De perfecte combinatie tussen techniek en vastgoed. Werk samen met de senior software developer om allerlei software van fluX te verbeteren. Gelukkig voel jij je helemaal thuis in de codewereld van .NET. Dus of je nu bezig bent met het verhogen van de conformiteitscore of het automatiseren van allerlei taxatiemodellen, jij weet precies hoe je de doelstellingen realiseert. En dat terwijl je ook samenwerkt met een extern ontwikkelteam. Waar dit team bepaalde softwaresystemen ontwikkelen, richt jij je vooral op onze Nederlands georiënteerde producten en alle wetgeving die daarbij komt kijken. Voor minimaal 32 uur per week verrijk jij onze

Bekijk vacature »

PHP Developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiënte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

Creatieve Front-end developer gezocht!

Functie Het front-end team bestaat momenteel uit 4 collega’s en is hard aan het groeien! Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren. Je werkt in het front-end team samen met de back-end teams en product owners om te zorgen dat de applicaties een fijne gebruikerservaring opleveren. Jouw expertise zorgt ervoor dat de juiste keuzes gemaakt worden qua techniek en ontwerp, van back-end tot aan gebruiker. In samenspraak met je team bepalen jullie de beste keuze voor techniek. Ook is er altijd ruimte om nieuwe technieken te ontdekken. Eisen • Je hebt gedegen

Bekijk vacature »
Jonas vermeulen

jonas vermeulen

16/12/2011 15:00:32
Quote Anchor link
hallo,

ik probeer een pagina te maken waar de afbeeldingen achteraf worden ingeladen in de pagina. daarvoor heb ik een stukje code, die de src attributen van de afbeeldingen instelt na de document.ready().

Echter als ik een breakpoint zet op de for lus die er uitgevoerd wordt blijkt de volledige dom niet geladen te zijn en loopt het aldus ook fout.

laat ik die for lus weg, (dus een lege document.ready) en plaats ik daar een breakpoint, dan is de dom wel volledig geladen.

ik hoop dat iemand me kan vertellen hoe ik dat kan oplossen


<script language="javascript" type="text/javascript">



$(document).ready(function() {
// Handler for .ready() called.
for(u=0;u<imagearray.length;u++) {
var imagetoload = this.getElementById('photo_'+u);
imagetoload.setAttribute('src',imagearray);
}

});
</script>

alvast bedankt
JOnas
Gewijzigd op 16/12/2011 15:01:00 door Jonas vermeulen
 
PHP hulp

PHP hulp

22/11/2024 07:21:32
 
Wouter J

Wouter J

16/12/2011 15:08:55
Quote Anchor link
Het language attribuut is nog nooit een bestaat attribuut geweest, het is slechts een verzinsel, haal deze dus maar helemaal weg.
Heb je wel jQuery ingeladen? En het best is om JS te plaatsen vlak voor </body>, dan weet je namelijk zeker dat de hele dom geladen is en heb je $(document).ready niet meer nodig.
 
Jonas vermeulen

jonas vermeulen

16/12/2011 15:36:55
Quote Anchor link
dat werkt ook niet, hij laadt enkel tot en met de content div en wil dan blijkbaar eerst die for uitvoeren. terwijl de elementen die ik nodig heb in die content div moeten komen (en die worden dus nog niet geladen daar)

de pagina kan je hier vinden: http://groepbelien.be/gallery2.php?eventid=31
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/12/2011 17:28:55
Quote Anchor link
Als ik op je voorbeeld kijk dan denk dat het de bedoeling is dat de thumbs groot getoond worden.
Werk je met AJAX ?
 
Jonas vermeulen

jonas vermeulen

16/12/2011 17:35:03
Quote Anchor link
ja; het is de bedoeling dat boven de thumbs de grote afbeelding komt; ik wil niet dat alle afbeeldingen in 1 keer laden , maar pas als de pagina zelf geladen is (dus op de achtergrond).

kan je me een voorbeeld geven van hoe het met ajax zou moeten?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/12/2011 18:43:45
Quote Anchor link
"Werk je met AJAX" was een vraag, dit hoeft namelijk niet als het om afbeeldingen gaat.
Je hoeft ook niet alle afbeeldingen op de achergrond te laden, dit kan je doen zodra er op een thumb geklikt wordt. Het principe is heel simpel:
1. je maakt in HTML een img object aan met een lege src ie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<img name="LargeImg" />

2. Je vult de array met verwijzingen naar de url van de afbeelding.
3. Je hangt een onclick event aan de thumbs
4. In de binnen de had tags schrijf je de volgende JS code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<script>
function CacheImage(ImageSource) {
    var ImageObject = new Image();
    ImageObject.src = ImageSource;
    return ImageObject;
}
function ShowLarge(idx) {
    if (typeof Slides[idx] == 'string')
        { // ONLY CACHES THE IMAGES ONCE
            Slides[Index] = CacheImage(Slides[idx]);
        }
}

5. Net voor </body> roep je ShowLarge(0) aan

PS.
Gedeeltes van dit script komen van dynamicdrive.com
Gewijzigd op 16/12/2011 18:49:38 door Ger van Steenderen
 
Jonas vermeulen

jonas vermeulen

16/12/2011 18:56:56
Quote Anchor link
ja, dat had ik ook al geprobeerd met zo een onclick, maar ik zou ze graag alle afbeeldingen verder in de achtergrond laden, ik wil er transitions opzetten en als die afbeelding dan nog verder moet laden is dat niet zo handig.

heb je een idee hoe ik dan die src attributen moet invullen na het laden van de pagina?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/12/2011 19:28:08
Quote Anchor link
Sorry, ben een stukje code vergeten, het moet zo zijn:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function CacheImage(ImageSource) {
    var ImageObject = new Image();
    ImageObject.src = ImageSource;
    return ImageObject;
}
function ShowLarge(idx) {
    if (typeof Slides[idx] == 'string')
        { // ONLY CACHES THE IMAGES ONCE
            Slides[idx] = CacheImage(Slides[idx]);
        }
    document.getElementById("LargeImg").src = Slides[idx].src;
}
Gewijzigd op 16/12/2011 19:29:30 door Ger van Steenderen
 
Wouter J

Wouter J

16/12/2011 22:53:07
Quote Anchor link
@ger, in HTML gebruik je name= en die probeer je te vangen met getElementById()? Overigens is werken met names in HTML en JS ouderwets en is het veel beter om te werken met IDs of classes.

@jonas, dan moet je een window.onload event maken: http://tinkerbin.com/jrTod1PA
Gewijzigd op 16/12/2011 22:54:00 door Wouter J
 
Jonas vermeulen

jonas vermeulen

17/12/2011 10:25:56
Quote Anchor link
Wouter, dat was exact wat ik nodig had. Bedankt!
ik heb het nog een beetje aangepast zodat de eerste afbeelding pas zichtbaar wordt nadat die eerste afbeelding volledig geladen is.
vroeger laadde die ook in strepen.

Ger, ook bedankt voor de moeite

Jonas

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

window.onload = function() {
                  
                 for(u=0;u<imagearray.length;u++) {
                    var
imagetoload = document.getElementById('img_'+(u+1));
                    imagetoload.setAttribute('src',imagearray[u]);
                     $("#img_"+(u+1)).load(function(){
                        
                        $(this).fadeIn();
                        });


?>
Gewijzigd op 17/12/2011 10:26:43 door jonas vermeulen
 
Wouter J

Wouter J

17/12/2011 10:37:24
Quote Anchor link
@jonas, als je toch jQuery gebruikt. Waarom dan niet het hele script jQuery gebruiken?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
$(function() {
  // Window.onload in jQuery
  
  imagearray.each(function( i, img ) {
    var elem = $('#img_' + (i + 1));
    
    elem.attr('src', img).fadeIn();
    // Load is voor AJAX, het lijkt me niet dat je dat in dit geval gebruikt...
  });
});
 
Jonas vermeulen

jonas vermeulen

18/12/2011 11:10:56
Quote Anchor link
die load zou ik toch willen behouden, dat zorgt ervoor dat de afbeelding pas verschijnt nadat die helemaal geladen is.
ik dacht nochtans dat dat ook jquery was en geen ajax? http://api.jquery.com/load/
 
Wouter J

Wouter J

18/12/2011 11:24:13
Quote Anchor link
AJAX is perfect geïntegreerd met jQuery, dus het is een functie van jQuery voor AJAX.

Maar ik wist niet dat je jQuery.load ook daarvoor kon gebruiken. Daarom heb ik het script nog wat verbeterd, met de load erin:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
  // Window.onload in jQuery
  
  var imagearray = [
    'http://waldio.webatu.com/system/images/nemo[1].jpg',
    'http://waldio.webatu.com/system/images/walle[1].jpg',
    'http://waldio.webatu.com/system/images/up[1].jpg'
  ];
  jQuery.each(imagearray, function( i, img ) {
    var elem = $('#img-' + (i + 1));
    elem.css('display', 'none');
    elem.attr('src', img).load(function() {
      $(this).fadeIn();
    });
  });
});


Wat jij had was een beetje dubbel op. Imagetoload bevatte namelijk het image element, maar 2 regels daarna ging je het element nog een keer ophalen met jQuery om het load event te gebruiken. 2 keer een element zoeken in de DOM kost tijd en dat is onnodige tijd.
Dit script bevat geen ophaal functies en ik had een vergissing gemaakt met jQuery.each(), dit heb ik ook verbeterd.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.