I have a vue template with 12 img tags
<img
:src="item.logo"
onerror="this.style.visibility='hidden'"
/>
The img tag is inside a loop.
The value of item.logo is for example:
"data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgZGF0YS1uYW1lPSJFYmVuZSAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDIuNzYgNTYuODMiPjxkZWZzPjxzdHlsZT4uY2xzLTEsLmNscy0yLC5jbHMtM3tmaWxsOiNmZmY7fS5jbHMtMXtvcGFjaXR5OjAuNjt9LmNscy0ze29wYWNpdHk6MC41OTt9LmNscy00e2ZpbGw6I2EyMWMyNjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxvZ28td25kLXR2LWluZm88L3RpdGxlPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjYuODEiIHk9IjAuMTQiIHdpZHRoPSIxMTUuOTUiIGhlaWdodD0iNTYuNjkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04Ni44OSw3OS40OWgtNS43VjU0LjQxaDUuN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOS4wMSAtMzcuO"
I do not put here the whole content of the b64, just know that it is a base64 encoded SVG.
The SVGs show correctly.
My problem is that the page rendering is quite long, because the device I use is very slow.
But when I modify the item.logo value by a URI that points to a hosted SVG, the page renders fast without showing at once the svgs, allowing the user to interact with the page while the logos load (lazy load?)
My question:
Is it possible to have a kind of asyncroneous load of these images in the case they are stored in the Vuex store in a b64 format? So the user would still be able to interact with the page while the images get loaded.
Vue module for lazyloading images in your applications: https://www.npmjs.com/package/vue-lazyload.
Looks like this is what you need.
Related
I am not able to find information on how to modify the main page of Vuepress, which, although I like its structure, being in .yaml format does not allow me to put links.
Is it possible to put links?
Or better, is it possible to convert that page to markdown format but keeping the output it delivers?
Unfortunately it is not possible without modifying the Vue templates. The home page is rendered by the Home component component and it renders the page's frontmatter using Vue's "Mustache" syntax. Values inside the mustaches will only ever be rendered as plain text.
You'll have to modify the Home component by either "ejecting" the default theme or by creating a custom layout for the home page. In both cases, you will obviously not receive any updates to the components anymore when you upgrade Vuepress.
I've created a demo to show how to use a custom layout to allow the frontmatter to be HTML. I've copied the Layout and Home components from Vuepress and changed the new Home component to use v-html to inject HTML values into the h1 component. So now your heroText could be Hi! This is a <a href='https://www.google.com'>link</a> and it will be displayed as a link on the home page. You could obviously do the same for the other elements.
Be sure to set the layout value of your home page to the new layout, e.g. layout: HomeLayout.
I have a vue project using mathjax to render partial html files which include some mathml inside. Those files are dynamically retrieved from remote server when customers search something and shown with vue v-html as raw html.
In details, all these occurs in the component 'Home', in the mounted function, I add mathjax related script as below:
const mathjaxScript = document.createElement('script');
mathjaxScript.setAttribute('id', 'MathJax-script');
mathjaxScript.setAttribute('async', 'async');
mathjaxScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js');
document.head.appendChild(mathjaxScript);
Then when customers search some keyword, corresponding partial html file will be retrieved and replace v-html tag, the math equation should be shown expectedly. However, those embeded mml:math tags weren't handled, they are just plain text, the math equation not handled correctly.
However, when I put one partial html in the vue template (not dynamically retrieve from remote server), the math equation rendered correctly. the mml:math tag will be replaced with mjx-container, etc.
So my question is: how to apply mathjax to those dynamically retrieved mathml? that is, rendering mathml on the fly with mathjax, Thanks.
Note: I use vuejs, mathjax 3 and typescript.
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions.
I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.
Anybody have any other ideas?
You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.
imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded
You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry
if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set
There is a page with a large number of images. The images are set as a CSS style background looking like this:
<div style="background-image: url("http://test.com/abc123.jpg");">
The page loads, but sometimes, some images are not loaded. The URL is still set, the DIV has the correct size, only the image itself is not displayed. (This may be due to a browser, server or a network problem but that is not important here - we only want to know whether the image is loaded or not).
How can I check that a background image like this has been loaded?
You could get browser log and analyze it for errors https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/log
Or you could inject some js that will validate such elements https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/execute
I could not find a way to detect loading of background image, but you could inject hidden img and bind on its 'load' event. But its not very reliable between browsers, see http://api.jquery.com/load-event/