preface

When writing mobile terminal project before, I used skeleton screen to solve the short blank phenomenon in the first screen rendering, using the method of “Hungry me” page-skeleton-webpack-plugin

However, the Page-skeleton-webpack-plugin needs the puppeteer dependency, which makes the whole project cumbersome during development and not all pages need skeleton screens, so we decided to use a Google plugin instead

Chrome extension generates a skeleton screen for web pages

Google Plug-in Download

The latest version of the download address, has not been approved by Google official review, PS: Google plug-in how to install, their own Google

rendering

How to use

The plug-in parameters

Same as ele. me skeleton screen document, as shown below

Skeleton screen principle

Ele. me skeleton screen principle, specific can see this article

In fact, the idea is very simple, we can according to the existing DOM structure, overwrite the specified color, so roughly achieved, but this scheme has two difficulties

  • How to identifyContainer and the block
  • Redundant CSS styles and redundant DOM structure handling

Container and the block

Since not all DOM nodes overwrite the specified background color, some dom nodes are used as containers


		// Set the text color of all elements that have children of textChildNode to the background color so that no text is displayed.
		if (ele.childNodes && Array.from(ele.childNodes).some((n) = > n.nodeType === Node.TEXT_NODE)) {
			transparent(ele)
		}
		if (checkHasTextDecoration(styles)) {
			ele.style.textDecorationColor = TRANSPARENT
		}
		// Hide all SVG elements
		if (ele.tagName === 'svg') {
			return svgs.push(ele)
		}
		/ /! So for the container if you have background or IMG if you need to treat it as a block otherwise treat it as a container
		if (EXT_REG.test(styles.background) || EXT_REG.test(styles.backgroundImage)) {
			return hasImageBackEles.push(ele)
		}
		// export const GRADIENT_REG = /gradient/
		// the CSS linear-gradient() function is used to create an image that represents a linear gradient of two or more colors
		if (GRADIENT_REG.test(styles.background) || GRADIENT_REG.test(styles.backgroundImage)) {
			return gradientBackEles.push(ele)
		}
		if (ele.tagName === 'IMG' || isBase64Img(ele)) {
			return imgs.push(ele)
		}
		if (
			ele.nodeType === Node.ELEMENT_NODE &&
			(ele.tagName === 'BUTTON' || (ele.tagName === 'A' && ele.getAttribute('role') = = ='button'))) {return buttons.push(ele)
		}
		if (
			ele.childNodes &&
			ele.childNodes.length === 1 &&
			ele.childNodes[0].nodeType === Node.TEXT_NODE &&
			/\S/.test(ele.childNodes[0].textContent)
		) {
			return texts.push(ele)
		}
	})(rootElement)

	/ /! Dom node reference types The DOM of the corresponding type is collected and processed centrally by the corresponding handler
	console.log('button array', buttons)
	console.log('hasImageBackEles', hasImageBackEles)
	console.log(pseudos, gradientBackEles, grayBlocks)
	svgs.forEach((e) = > handler.svg(e, svg, cssUnit, decimal))
	texts.forEach((e) = > handler.text(e, text, cssUnit, decimal))
	buttons.forEach((e) = > handler.button(e, button))
	console.log('imgs array', imgs)

	hasImageBackEles.forEach((e) = > handler.background(e, image))
	imgs.forEach((e) = > handler.image(e, image))
	pseudos.forEach((e) = > handler.pseudos(e, pseudo))
	gradientBackEles.forEach((e) = > handler.background(e, image))
	grayBlocks.forEach((e) = > handler.grayBlock(e, button))
Copy the code

The solution is very simple according to whether the DOM has background, backgroundImage and Linear-gradient as containers

Redundant CSS styles and redundant DOM structure handling

Hungry? That set of solution is to have made a processing the redundant nodes and style, but the effect is not very clear, we change the idea, actually we already know the node is the container, the node is a block, then we do is for the container to this node, because the real show in the page, as a skeleton of a corresponding screen blocks, and for a specific position, You can use absolute positioning, which is obtained through the getBoundingClientRect API

My front-end learning notes 📒

Recently, I spent some time to arrange the notes on the language sparrow, which is convenient for children to read

  • My front-end learning notes 📒

conclusion

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌