I've got a bigger .json lottie file on the homepage and the preloader finishes loading before this .json file is loaded and displayed. The lottie only appears after around 3-4 seconds after the preloaded disappeared.
I'm using this Vanilla Javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
let loader = document.querySelector('.vanilla-preloader');
loader.style.opacity = 0;
loader.addEventListener('transitionend', () => loader.remove());
});
</script>
How could I change this so that the preloader would last until the whole page is loaded - including the .json lottie file?
I've tried replacing the script with this, but that just permanently locks the preloader and the page doesn't show up anymore:
window.onload = function() {
jQuery(function($){
$('.loader').fadeOut('slow');
});
};
Thanks a lot in advance!
Related
I hope you can enlighten me what I am doing wrong here with vue-filepond.
So my problem is when I want to edit my form I cant get preview of file I uploaded earlier, strange thing is that I used all the same code for Vue 2 and it worked without problem, but on Vue 3 it doesn’t work(I am sure I’m missing something and I did install v6 for Vue 2 and newer version for Vue 3).
My file is there when I am editing my form but not visible in Filepond component
This is how Filepond component looks like:
<file-pond
ref="pond"
credits="false"
allow-multiple="true"
allowFileTypeValidation="false"
allowFileSizeValidation="false"
fileValidateTypeDetectType="false"
allowRemove="true"
checkValidity="false"
instant-upload="false"
v-bind:files="myFiles"
:beforeRemoveFile="handleFilePondRemoveFiles"
v-on:updatefiles="handleFilePondUpdateFiles"
v-on:init="handleFilePondInit"
/>
So when I am editing a form (using Laravel for backend and passing a data to Vue component in blade file...) in mounted method in Vue, this code works fine with Vue 2, I can see then file which I uploaded earlier (img or pdf) but on Vue 3 not, but its actually there:
mounted() {
if (this.isEdit) {
for (let file in this.files) {
let f = new File([this.files[file]], this.files[file].name, {
type: 'application/pdf'
});
this.myFiles.push(f)
}
}
},
I went through your docs but could not find any proper info or code example that would work for me...
Thx for help!
I came up with this solution and it works, feel free to correct me if I am wrong :)
mounted() {
if (this.isEdit) {
for (let file in this.files) {
this.getUploadedFile(this.files[file].original_url, this.files[file].name, this.myFiles)
}
}
},
and method
methods: {
async getUploadedFile(url, fileName, arr) {
await fetch(url)
.then(res => res.blob())
.then(blob => {
arr.push(new File([blob], fileName, {
type: blob.type
}))
});
},
and in filepond component I binded files like this:
v-bind:files="[...myFiles]"
Now I can see my uploaded file in FilePond component and delete it or upload new one...
I am using pdfmake.js(which is around 2mb) and XLSX(which is around 1mb) with angular 7, but they are used only on one page of the application. when I load my home page, in developer tools I can see main.js file size is around 8mb, I implemented lazy loading which reduced main.js file size to 7mb can I somehow further reduce main.js file by loading pdfmake.js and XLSX only when I click on some button?
pdfMake:any;
async loadPdfMaker() {
if (!this.pdfMake) {
const pdfMakeModule = await import('pdfmake/build/pdfmake');
const pdfFontsModule = await import('pdfmake/build/vfs_fonts');
this.pdfMake = pdfMakeModule.default;
this.pdfMake.vfs = pdfFontsModule.default.pdfMake.vfs;
}
}
async generatePdf() {
await this.loadPdfMaker();
const def = { content: 'A sam`enter code here`ple PDF document generated using Angular and PDFMake' };
this.pdfMake.createPdf(def).download('optionalName.pdf');;
}
You can further reduce the size by importing minified version of the library.
import * as pdfMake from 'pdfmake/build/pdfmake.min';
I have a some middleware in my Nuxt app that closes a fullscreen mobile menu when a new route is clicked. What I am experiencing is the following:
user clicks nuxt-link
menu closes
asyncData delay (still shows current page)
new page is loaded upon resolved asyncData
What I would like is the following:
user clicks nuxt-link
asyncData delay (if exists)
menu closes upon new page load
Is it possible to have an asyncData watcher in Nuxt middleware?
I know I can hack this by creating a store value that tracks asyncData load, but I'd rather not have to wire up such a messy solution to each and every page that uses asyncData.
Note - not every page uses asyncData.
I think that the best option would be to leave the menu open, and then when the new page finishes loading (probably on the mounted hook) send an event or action to close the menu.
I figured this out in a more elegant solution than having to implement a store.dispatch function on each individual asyncData function.
So what I did was use a custom loading component: https://nuxtjs.org/api/configuration-loading/#using-a-custom-loading-component
However, instead of showing a progress bar or any sort of loading animation, I just used this component to set a loading state in my vuex store. Note - it forces you to have a template, but I just permanently disabled it.
<template>
<div v-if="false"></div>
</template>
<script>
export default {
methods: {
start() {
this.$store.dispatch('updateLoadingStatus', true);
},
finish() {
this.$store.dispatch('updateLoadingStatus', false);
}
}
};
</script>
Then in my middleware, I set up an interval watcher to check when loading has stopped. When stopped, I stop the interval and close the mobile menu.
export default function({ store }) {
if (store.state.page.mobileNav) {
if (store.state.page.loading) {
var watcher = setInterval(() => {
if (!store.state.page.loading) {
store.dispatch('updateMobileNav', false);
clearInterval(watcher);
}
}, 100);
} else {
store.dispatch('updateMobileNav', false);
}
}
}
This doesn't specifically have to be for a mobile menu open/close. It can be used for anything in middleware that needs to wait for asyncData to resolve. Hope this can help anyone in the future!
I'm very new to Framework7, and want to build a fairly simple mobile app -- a list of places, detail pages of those places (where some murals are displayed), and a map and about page. My current plan is to publish it via PhoneGap Build, since that seems like a fast and easy way to deploy.
I created my app using the phonegap-framework7-vue template. Perhaps overkill for such a simple app, but seems better than building it from scratch.
I want to load a list of places via AJAX (eventually via sqlite), and can't figure out how/when to do this, and how to access the main app. My Murals.vue file has the template and the following script, but doesn't load because app.request is undefined. I've tried "framework7", "Framework7", and moving it outside of the mounted() call, but feel like I'm just guessing. Any suggested? Thanks!
<script>
import F7List from "framework7-vue/src/components/list";
let dataURL = 'https://jsonplaceholder.typicode.com/posts'; // returns some json
export default {
name: 'Murals',
components: {F7List},
mounted() { // when the Vue app is booted up, this is run automatically.
app.request.get(dataURL, function (data) {
console.log(data);
});
},
data () {
return {
title: 'Murals'
};
}
};
</script>
You're code is almost right !
To access to F7 app instance with vue, you have to use this.$f7.request rather the app.request
I'm trying to load a static HTML file (of a Jupyter notebook) inside a div in my Vue js app.
I tried doing <iframe src="/static/product.html"> but this renders the home page of the vue app inside the iframe.
What's the correct way to do this in vue?
Load vue ressource addon if not done already
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js"></script>
In your app, create a component who load your static raw html page
Vue.component('statichtmlpage', function (resolve, reject) {
vue.$http.get('your_static_html_page.html', function(data, status, request){
var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/html");
resolve({
template: doc
});
});
});
And add component tag where you like to display your page
<statichtmlpage></statichtmlpage>